Question

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

所以它看起来像是从

开始

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

点击它然后转到

<div class="example">

在下次点击时，它就是

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

等等。

提前致谢！：）

Answer 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>

Answer 2

如果必须使用内联样式，可以将样式保存在一个变量中，然后使用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>

Answer 3

您应该使用toggleClass()并删除内联样式。以下是一个简单的例子：

＆＃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;

Answer 4

您可以使用类来实现此效果。

CSS

.red {
    background-color: red;
}

HTML

<div class="example"></div>

的JavaScript / JQuery的

$('.example').on('click', function() {
    $(this).toggleClass('red')
})

Answer 5

您可以使用解决方案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>

单击时切换元素样式

5 个答案: