使用不同于css的jquery修改样式答案

【问题标题】：style modification with jquery different from css使用不同于css的jquery修改样式
【发布时间】：2018-03-05 04:52:52
【问题描述】：

我正在通过 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');

有什么区别？

【问题讨论】：

你不能用 CSS 写 JavaScript/jQuery。
你不能用 CSS 写 JavaScript/jQuery 有人试过吗？

标签： jquery css styles

【解决方案1】：

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

内联元素 !important (:!important"...) - 这些是最优先的样式
!important 在@media 内的内联块中
!important 内联块
!important inside external css（@media 声明）
!important 内部外部 css
内联元素样式声明 (:"...)
内联块内的css声明
外部 css 样式中的 css 声明（@media 声明）
外部 css 样式中的 css 声明根据您的选择器类型，还有更多层次结构元素（通过 id 在 css 中选择元素始终具有更高的优先级，然后通过多个类选择它，这本身比通过单个类选择元素具有更高的优先级）。

您的 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 并将您的样式放入外部样式中。（例外——只有当你真的知道自己在做什么时，你才能按照自己的方式去做）

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：