用纯JavaScript覆盖全局CSS [英] Override global css with pure javascript

问题描述

我有以下情况:

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

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

This code lies in the first <style>...</style> in the html page. I would like to override this global css, by setting for instance new properties values like in the example below:

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

如何使用纯Javascript完成此操作?

How can I accomplish this with pure Javascript?

谢谢大家

纳米

推荐答案

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

Modify the css as you want by modifying this object

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

OR

修改相关DOM对象的样式属性

Modify style attribute of relevant DOM objects

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

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

这篇关于用纯JavaScript覆盖全局CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！