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

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，其值是高度、宽度等。我不想创建或更新样式，但我想更新 #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 动态计算的(在这种情况下，内联样式更改是必要的)