3

我是 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已更新：

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

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

4

4 回答 4

4

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

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

然后只需使用添加新类

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

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

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

于 2013-04-29T11:24:58.203 回答
1

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

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

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

于 2013-04-29T11:24:19.530 回答
0

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

所以这是预期的行为。

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

于 2013-04-29T11:24:38.280 回答
0

巴黎的问题问：

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

...和@MMM回复：

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

事实上，你可以。以下行将文档第二个样式表中第三条规则的padding-top值 from修改为20pxto ：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 文档。

于 2018-03-12T00:15:12.463 回答