Question

我是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 ，其值为height，width等。我不希望样式被创建或更新，但我想要更新＃plug-in-container.visible ，因为在我想要调整视频窗口大小的条件下，这会更加安全。我怎么能这样做？

Answer 1

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

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

然后只需使用

添加新类

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

所以，作为进一步的好处，你还可以保持css不受javascript的影响。

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

Answer 2

如果我可以称之为“样式堆栈”，你看到的是什么。它显示了修改dom元素的所有规则。删除线意味着其他一些规则会覆盖该规则。

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

编辑类而不是样式会更“安全”吗？

Answer 3

基本上它是如何工作的，你不能以另一种方式更新CSS样式，除非你注入另一个样式表。

所以这是预期的行为。

使用$(element).css()时，更新这些元素的css，不编辑CSS类。这就是它被添加到该元素的内联样式属性的原因。

Answer 4

问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文档。

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

4 个答案: