jquery css更改删除一些css文件规则

我注意到，如果我使用jQuery更改元素的css，它将删除已指定给元素的一些css规则。jquery css更改删除一些css文件规则

例如，

.className, .className2, etc... { 
    background-color: black; 
    color : silver; 
} 

.className:hover, .className2:hover, etc... { 
    background-color: gray; 
    color : white; 
}

现在，如果用户点击这个元素，我希望它永久地改变背景，以显示它已被点击，如果另一个兄弟元素一直点击，它就会失去它的jQuery设置CSS规则并返回到原来的CSS指定的规则（又名，它就会失去它的RGBA背景，以及“盘旋”的规则将被添加回）

highlightClicked : function (el) { 
     el.css({ 
      "background-color" : "rgba(70, 70, 70, 0.7)", 
      "color" : "white" 
      }); 
     $('#parentElement > span').each(function() { 
      $($(this)).not(el).css({ 
       "background-color" : "rgba(70, 70, 70, 0.0)", 
       "color" : "gray" 
      }); 
     }); 
    },

但jQuery的的CSS似乎删除这些原始规则。

它们如何保存？

来源

2014-10-20 Growler

认为他们不会被删除，只是重写......有你在，如果该元素检查员检查样式属性真的被删除？ – webeno 2014-10-20 03:36:18

而不是使用.css()改变一个元素的样式，这样做的更有效的方法是添加/删除类：

HTML

//add a universal class to target with jquery, my example is .target 
<div class="target className">className</div> 
<div class="target className2">className2</div>

CSS

.active, .active:hover{ //don't add .active:hover if you want an actual hover state 
    background-color:red; //Whatever style you want 
    color: #FFF; //Whatever style you want 
}

JQUERY

$(".target").click(function(){ 
    $(this).addClass("active").siblings(".target").removeClass("active"); //will add the class to the clicked element and remove it from anyothers 
});

EXAMPLE 1

OR如果你想改变类的单个元素，你可以简单地使用.toggleClass()像这样：

$(".target").click(function(){ 
    $(this).toggleClass("active"); 
});

EXAMPLE 2

来源

2014-10-20 03:39:14 jmore009

我也使用过这种方法，通常是制表符。简单可靠。 – 2014-10-20 03:41:41

这太棒了。谢谢！ – Growler 2014-10-20 20:15:54

@ jmore009的答案很可能是最好的方法，但要回答你的问题：@webeno指出，jQuery只是覆盖样式表规则。你可以通过CSS属性设置为空字符串，恢复他们：

el.css({ 
     "background-color" : "", 
     "color" : "" 
     });

例子：http://jsfiddle.net/1ec10ncn/2/

来源

2014-10-20 03:48:10

jquery css更改删除一些css文件规则

回答

相关问题