Changing color back to default in CSS and Jquery
This question already has an answer here:
在应用css之前重置所有其他li元素
$('li').on('click', function() {
$('li').css('color', '');//WIll remove `color` css from all `li` elements
$(this).css('color', 'red');//Will apply `red` to current element
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>$(this).css("color","red");
在此之前，如果项目列表的类名称为myclass，您可以设置，则将所有元素的颜色设置为默认值
$(".myclass").css("color","red");
You can do it like this:
$(this).css("color", "");
...but rather than using direct styling, in general I'd suggest using a class and adding it ( addClass ) when you want those styles applied, and removing it ( removeClass ) when you want them removed. toggleClass is also really handy.
Example of both:
var direct = false;
var usingClass = false;
$("#direct").on("click", function() {
direct = !direct;
if (direct) {
$(this).css("color", "red");
} else {
$(this).css("color", "");
}
return false;
});
$("#using-class").on("click", function() {
usingClass = !usingClass;
$(this).toggleClass("the-class", usingClass);
return false;
});.the-class {
color: red;
}<p>Click to toggle.</p>
<p id="direct">Direct</p>
<p id="using-class">Using class</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>上一篇: 动态添加和删除元素样式的最佳方法