用纯 javascript 覆盖全局 css

Question

我有以下情况：

 .my-nice-class {
  max-width: 90%;
  max-height: 90%;
}

此代码位于 html 页面中的第一个 <style>...</style> 中。我想通过设置新的属性值来覆盖这个全局 css，如下例所示：

 .my-nice-class {
  max-width: 40%;
  max-height: 40%;
}

我怎样才能用纯 Javascript 完成这个？

谢谢你们，

纳米

原文由 Nano 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过修改此对象来根据需要修改 css

 document.getElementsByTagName("style")[0].innerHTML

或者

修改相关DOM对象的style属性

document.getElementsByClassName("my-nice-class").style[0] = "max-width: 40%;max-height: 40%;"

注意： 如果您有多个对象，则必须使用 for 循环而不是 style[0] 。

原文由 TRiNE 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

document.getElementsByClassName("nav-questions").style.maxHeight="40%";
document.getElementsByClassName("nav-questions").style.maxWidth="40%";

这行代码自动覆盖全局 css，因为 JS 应用的 css 的优先级总是更高（即使是内联 css）。

原文由 RRajani 发布，翻译遵循 CC BY-SA 3.0 许可协议