如何在不添加样式属性的情况下修改 CSS 规则？答案

【问题标题】：How to modify CSS rules without adding style attribute?如何在不添加样式属性的情况下修改 CSS 规则？
【发布时间】：2013-04-23 01:01:38
【问题描述】：

我是 Javascript 的新手，我正在尝试为现有项目实现功能。我想修改 html 元素的 CSS 规则，以便放大和恢复视频窗口。当我从 Chrome 开发者工具中选择元素时，我会看到以下属性：

element.style {

}

#plug-in-container.visible {
   height: 335px;
   width: 470px;
   margin-top: -147px;
   top: 50%;
   margin-left: -229px;
   left: 50%;
}

我使用以下代码放大视频：

$('.visible').css( {
    height: '700px',
    width: '1000px',
    'margin-top': '-350px',
    top: '50%',
    'margin-left': '-480px',
    left: '50%'
} );

在此之后，我预计 #plug-in-container.visible 的值会发生变化，但不是那样，而是看到与删除线相同的值，并且我看到了 元素。样式已更新：

element.style {
   height: 700px;
   width: 1000px;
   margin-top: -350px;
   top: 50%;
   margin-left: -480px;
   left: 50%;
}

当我动态查看 html 元素时，我看到元素 style 是用值高度、宽度等创建的。我不想创建或更新样式，但我想更新 #plug-in-container.visible，因为在我想调整视频窗口大小的情况下，这会更安全。我该怎么做？

【问题讨论】：

标签： javascript jquery html css styles

【解决方案1】：

paris 提出的问题：

但我想更新#plug-in-container.visible

...和@MMM 回复：

您不能以其他方式更新 CSS 样式，除非您注入另一个样式表

其实可以的。以下行将文档第二个样式表中第三条规则的 padding-top 值从 20px 修改为 300px：

document.styleSheets[1].cssRules[2].style.paddingTop = '300px'

...给定index.html:

<html>
<head>
  <link type="text/css" href="foo.css"
  <link type="text/css" href="style.css">
<head>
<body><h1>Bar</h1></body>
</html>

...和style.css:

html, body { padding: 0; margin: 0 }
body { color: black; }
h1 { color: gray; padding-top: 20px; }

因此，不管原问题的实用性如何，如果#plug-in-container.visible是文档第一个样式表的第一条规则，样式width、height等可以通过以下方式修改：

var s = document.styleSheet[0].cssRules[0].style
s.height = '700px'
s.width = '1000px'
s.marginTop: '-350px'
s.marginLeft: '-480px'

另请参阅 CSSStyleSheet 的 MDN 文档。

【讨论】：

【解决方案2】：

只需在级联上定义另一个 CSS 规则，其特性至少与前一个相同（或更高，例如）

#plug-in-container.visible.enlarged {
   height: 700px;
   width: 1000px;
   margin-top: -350px;
   margin-left: -480px;
}

然后使用

添加新类

$('.visible').addClass('enlarged');

因此，作为进一步的好处，您还可以将 css 与 javascript 隔离开来。

当然，您可以使用这种方法，只要您需要更新的值是固定的并且不是由 javascript 动态评估的（在这种情况下，需要更改内联样式）

【讨论】：

【解决方案3】：

基本上就是这样工作的，你不能用另一种方式更新 CSS 样式，除非你注入另一个样式表。

所以这是预期的行为。

当您使用$(element).css() 时，您会更新这些元素的 css，而不是编辑 CSS 类。这就是为什么它被添加到该元素的内联样式属性中。

【讨论】：

【解决方案4】：

如果我可以这样称呼它，您看到的是“样式堆栈”。它向您展示了所有修改 dom 元素的规则。删除线表示其他规则覆盖了该规则。

您正在使用 jQuery 来编辑 css，因此您在该调用中使用的所有样式都将出现在元素本身上。据我所知，您无法从 javascript 编辑 CSS 规则。

编辑类而不是样式究竟如何“更安全”？

【讨论】：

Style 添加了一个内联样式，它将覆盖样式表中的所有样式。如果您使用媒体查询或类似内容，这可能会导致问题。
问题是；我正在使用 $('.visible').css 来更改属性，但那是在我的 html 元素上添加样式属性。当我关闭视频时，我将其设置为不可见。但是，在这种情况下，即使我将其设置为不可见，在我关闭窗口后它仍然会显示一个黑框，因为样式属性仍然存在。而且由于我的窗口可能关闭的情况太多，因此在适当的情况下删除样式元素是不切实际的。 Fabrizio Calderan 的回答解决了我的问题。