如何向现有 CSS 类添加新规则答案

【问题标题】：How to add a new rule to an existing CSS class如何向现有 CSS 类添加新规则
【发布时间】：2013-08-27 15:13:34
【问题描述】：

在下面的代码中，我已经说明了我想要实现的目标...... 通过向其添加新规则来更改现有 CSS 类。

<head>
<style> 

h4.icontitle
{font-size: 22pt;}

</style>
</head>
<body>
<script type="text/javascript">

textpercent = 84;
document.styleSheets[1].cssRules.['h4.icontitle'].style.setProperty('-webkit-text-size-adjust', textpercent+'%', null);

</script>

<h4> hello </h4>

</body>

这是针对在不同尺寸屏幕上运行的网站的预处理元素。结果将是......

h4.icontitle
{font-size: 22pt;
-webkit-text-size-adjust:84%;}

在检查 DOM 时可见。

任何想法都将受到欢迎。仅限 Javascript - 这里没有 JQuery...

已解决。

经过大量的试验和错误，这是一个允许 javascript 将样式直接插入 CSS 的工作函数

function changeCSS(typeAndClass, newRule, newValue)
{
    var thisCSS=document.styleSheets[0]
    var ruleSearch=thisCSS.cssRules? thisCSS.cssRules: thisCSS.rules
    for (i=0; i<ruleSearch.length; i++)
    {
        if(ruleSearch[i].selectorText==typeAndClass)
        {
            var target=ruleSearch[i]
            break;
        }
    }
    target.style[newRule] = newValue;
}

调用

    changeCSS("h4.icontitle","backgroundColor", "green");

希望其他人会发现这是在纯 javascript 中使用其 CSS 中的变量的有用方法。

【问题讨论】：

你想用 javascript 或 jquery rite 改变 css 吗？
为什么不使用 jQuery 或类似的库？ $('h4.icontitle').css('-webkit-text-size-adjust', textpercent+'%');
请只使用Javascript。此站点中没有库（到目前为止）。
已解决。查看对问题的修改。

标签： javascript css class dynamic stylesheet

【解决方案1】：

试试这段代码

$('h4.icontitle').css('-webkit-text-size-adjust','84%');

【讨论】：

我没有使用 JQuery。只是JS。这看起来很棒。什么是 JS 等价物？
普通 JS 的重要和复杂之处在于：$('h4.icontitle')。为什么？您基本上需要遍历整个 DOM 树并找到具有该类的所有 h4 标记并构建它们的列表。
查看原始问题中的代码 sn-p。这就是我想要的工作。
与 Vector 的回答一样，这不是 TJS101 提出的同一问题的解决方案。它确实会设置所有 current h4.icontitle 元素的样式，但是如果稍后创建新的 h4.icontitle 元素，它们将不会采用样式，就像更改 css 规则时那样。显然，这可能很重要，也可能不重要，具体取决于场景。

【解决方案2】：

/**
Use this to update style tag contents
**/
var css = 'h1 { background: grey; }',
head = document.getElementsByTagName('head')[0],
style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

要使用 body 中的元素，请使用 querySelector 根据其 CSS 标识符定位元素。这应该可以帮助你 https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

var el = document.querySelector(".icontitle");
el.setAttribute("style","-webkit-text-size-adjust:84%");

或者你可以准备一个 css sn-p 并有条件地使用它例如：如果“new_css”是新的变化那么

/**css code in style tag**/
.icontitle{

  /**style at initial stage**/

}
.icontitle-new-modified{

 /**modified css style at later stage**/

}

//after a condition is satisfied
el.setAttribute("class","icontitle-new-modified");

【讨论】：

document.querySelector(".icontitle") 返回一个空值。你确定这是正确的吗？谢谢。
啊。它针对的是正文中的元素，而不是 CSS。我需要这个来改变 HEAD 中的 CSS。请在原始问题中查看所需的输出。
你可以创建备用的css sn-ps，并使用querySelector来改变元素的类属性，这样你甚至可以管理你的代码，你可以实现你想要的。
元素未定义。内容是动态传递的。我需要更改 CSS 而不是元素样式。
我已经修改了答案，请检查，希望对您有帮助

【解决方案3】：

我把一个例子放在一起，应该适合你的需要

演示jsFiddle

// this gets all h4 tags
var myList = document.getElementsByTagName("h4"); // get all p elements

// this loops through them until it finds one with the class 'icontitle' then it assigns the style to it
var i = 0;
while(i < myList.length) {
    if(myList[i].className == "icontitle") {
        myList[i].style.color="red";
    }
    i++;
}

【讨论】：

逻辑是一样的，很高兴能帮上忙。
为了清楚起见，这个答案解决了一个稍微不同的问题：更改特定选择器的 css 样式，而不是创建不同的 css 规则。如果您稍后将新的 h4.icontitle 元素添加到 DOM，则可以看出差异。在 TJS101 对他/她自己的问题的回答中，新元素将具有更改的样式，而在此解决方案中则不会。

【解决方案4】：

此功能非常适合我的网站。

function changeCSS(typeAndClass, newRule, newValue)
{
    var thisCSS=document.styleSheets[0]
    var ruleSearch=thisCSS.cssRules? thisCSS.cssRules: thisCSS.rules
    for (i=0; i<ruleSearch.length; i++)
    {
        if(ruleSearch[i].selectorText==typeAndClass)
        {
            var target=ruleSearch[i]
            break;
        }
    }
    target.style[newRule] = newValue;
}

调用

    changeCSS("h4.icontitle","backgroundColor", "green");

【讨论】：