我试图在点击时切换样式属性。我没有尝试更改样式属性的值,我想实际添加和删除整个样式属性。
所以它看起来像是从
开始<div class="example" style="background-color:red">
点击它然后转到
<div class="example">
在下次点击时,它就是
<div class="example" style="background-color:red">
等等。
提前致谢! :)
答案 0 :(得分:1)
使用toggleClass()
,您可以更改background-color
属性:
$('.example').on('click', function() {
$(this).toggleClass('red')
})
.example {
height: 100px;
width: 100px;
background: #adadad;
}
.red {
background: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example"></div>
答案 1 :(得分:1)
如果必须使用内联样式,可以将样式保存在一个变量中,然后使用attr()
var div = $('.example');
var css = div.attr('style')
div.click(function() {
div.attr('style', div.attr('style') != '' ? '' : css)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example" style="background-color:red; color: white;">Div</div>
答案 2 :(得分:0)
您应该使用toggleClass()
并删除内联样式。以下是一个简单的例子:
$(".example").on('click', function() {
$(this).toggleClass("red");
});
&#13;
.red {
background-color: red
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example">
Something comes here...
</div>
&#13;
答案 3 :(得分:0)
您可以使用类来实现此效果。
CSS
.red {
background-color: red;
}
HTML
<div class="example"></div>
的JavaScript / JQuery的
$('.example').on('click', function() {
$(this).toggleClass('red')
})
答案 4 :(得分:0)
您可以使用解决方案https://jsfiddle.net/20v7yuLm/
$('div').click(function(){
$(this).toggleClass('example');
});
.example{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example" >
test
</div>