Question

我通过jquery将以下样式应用于div：

$("#content").css('width',$("#content").width()+'px');
$("#content").css('height',$("#content").height()+'px');
$("#content").css('position','fixed');

稍后在脚本中我再次移除固定位置和高度和宽度设置。

我试图通过添加一个类

来做到这一点

.divStatic{
position:static;
height:auto;
width:auto;
}
$("#content").addClass('divStatic');

但是这样DIV保持其固定宽度。如果我用jquery做，一切正常。

$("#content").css('position','static');
$("#content").css('width','auto');
$("#content").css('height','auto');

区别是什么？

Answer 1

嗯，基本上CSS中有一个层次结构：

HTML属性（例如<div height="500px">）
元素的css（如<div style="color: blue;">
css课程（如<div class="divStatic>）

由于jQuery命令添加了2. one，因此您无法使用类覆盖它，因为浏览器认为第一个更重要。（使用第二个$（...）。css覆盖html本身的第一个）

css优先级（如SITH-power等）还有更多优点，您可以轻松找到更长，更好的解释，因为您现在知道，为什么会发生这种情况。

要解决此问题，您可以将第一个css样式移动到类中，然后确保它们不如.divStatic描述重要。

Answer 2

显着的区别在于浏览器应用于元素的样式的优先级。实际优先级是：

内联元素！important（：！important＆＃34; ...） - 这些是最优先的样式
！在@media
！重要的内联块
！在外部css内重要（@media声明）
！在外部css中很重要
内联元素样式声明（：＆＃34; ...）
css声明
css声明（@media声明）
css声明并且根据您的选择器类型还有一些更多的层次结构元素（通过id选择css中的元素始终具有更高的优先级，然后通过多个类选择它，其本身比单个类选择元素更高的优先级。）< / LI>
您的jQuery内联样式声明，只需在您的元素中添加类就无法覆盖它。我建议用这样的东西重写你的js：
```
$("#content").css({'width':$("#content").width()+'px', 'height':$("#content").height()+'px', 'position':'fixed'});
$(document).on('*actionName*', '.elName', function(event){
  $("#content").removeAttr('style').addClass('divStatic');
});
```
无论如何，直接用js应用css并不是一个好习惯。尽量避免它。考虑使用jQuery addClass，并将样式放在外部样式中。（例外 - 你只有在你真正知道自己在做什么的时候才能按照自己的方式行事）

使用与css不同的jquery修改样式

2 个答案: