如何将新规则添加到现有的CSS类 [英] How to add a new rule to an existing CSS class

查看:47
本文介绍了如何将新规则添加到现有的CSS类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在下面的代码中,我已经说明了我试图实现的目标…… 通过向现有的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时将可见的。

任何想法都是最受欢迎的。仅限Java-此处没有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");

希望其他人会发现这是一种在纯Java脚本中使用他们的CSS中的变量的有用方法。

推荐答案

我做了一个应该适合您需要的示例

演示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类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆