javascript - 通过javascript更改整个文档的CSS值

Question

我想在 ajax 调用中更改从 CSS 文件加载的值，这意味着不仅针对一个元素，例如:

document.getElementById("something").style.backgroundColor="<?php echo "red"; ?>";

但类似的脚本通常会更改 css 值，不仅针对元素的 ID，理想情况下如 CSS CLASS divforchangecolor 的背景颜色:

CSS:

.divforchangecolor{
display: block;
margin: 20px 0px 0px 0px;
padding: 0px;
background-color:  blue;
}

HTML:

<div class="divforchangecolor"><ul><li>something i want to style</li><ul></div>
<div class="divforchangecolor">not important</div>
<div class="divforchangecolor"><ul><li>something i want to style</li><ul></div>
<div class="divforchangecolor">not improtant</div>

对我来说理想的解决方案:

onclick="--更改 CSS 值 divforchangecolor.backgroundColor=red--"

但我需要更改 CSS 以达到 .divforchangecolor ul li 和 .divforchangecolor ul li:hover

Answer 1

如果您不能只将类名应用于这些元素。您可以向您的页面添加一个新的选择器。以下 vanilla JS 可以做到这一点 ( jsFiddle )。

function applyDynamicStyle(css) {
    var styleTag = document.createElement('style');
    var dynamicStyleCss = document.createTextNode(css);
    styleTag.appendChild(dynamicStyleCss);
    var header = document.getElementsByTagName('head')[0];
    header.appendChild(styleTag);    
};

applyDynamicStyle('.divforchangecolor { color: pink; }');

只需调整其背后的想法，使其成为防弹的。