单击时切换元素样式

时间:2017-07-10 09:08:13

标签: jquery

我试图在点击时切换样式属性。我没有尝试更改样式属性的值,我想实际添加和删除整个样式属性。

所以它看起来像是从

开始
<div class="example" style="background-color:red">

点击它然后转到

<div class="example">

在下次点击时,它就是

<div class="example" style="background-color:red">

等等。

提前致谢! :)

5 个答案:

答案 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()并删除内联样式。以下是一个简单的例子:

&#13;
&#13;
$(".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;
&#13;
&#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>