请教一个关于用JavaScript代码更改CSS颜色的问题

分类：MUI

JavaScript

当我用JS代码这样设置subContent.style.borderBottomColor = "red";改变的是上面的颜色,我想改变下面:after内的border-bottom颜色,该怎么通过JS代码去更改?

        for(var i = 1; i <= monDaynum; i++) {  
            var subContent = document.createElement("div");  
            subContent.className = "canChoose";  
            if(nowDay === i) {  
                subContent.style.borderBottomColor = "red";//这样改变的是上面的CSS颜色  
            } else {  

            }  
            if(i == nowDay) {  
                subContent.classList.add("today");  
            }  
            subContent.innerHTML = i; //每天的数字  
            el.appendChild(subContent);  
        }

2017-08-07 14:12 负责人:无分享

3 个回复

LLgg

看一下下面的代码是不是符合你的要求

<!DOCTYPE html>  
<html>  
    <head>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
        <meta charset="utf-8">  
        <title>js改变伪元素:after-----中旋网https://www.zzxxo.com</title>  
        <style>  
            .canChoose{  
                border-bottom:1px solid #BBBBBB;  
            }  
            .canChoose::after {  
                content: 'Hello！';  
                border-bottom:8px solid #5A8C19;  
            }  
        </style>  
    </head>  
    <body>  
        <p class="canChoose">  
            https://www.zzxxo.com  
            https://www.zzxxo.com  
            https://www.zzxxo.com  
            https://www.zzxxo.com  
            https://www.zzxxo.com  
        </p>  
    </body>  
    <script>  
        //创建新样式标签  
        var style = document.createElement("style");  
        //将样式标签添加到头部  
        document.head.appendChild(style);  
        sheet = style.sheet;  
        //使用addrule或insertrule注入  
        sheet.addRule('.canChoose::after', 'border-bottom: 50px solid #f00');  
        sheet.insertRule('.canChoose::after { border-bottom: 50px solid #f00 }', 0);  
    </script>  
</html>

这是我的网站，O(∩_∩)O谢谢支持----->>中旋网zzxxo

Salazar (作者)

你这个例子好像没什么问题.但是我这个canChoose是通过JS代码创建的.如果是我这样的JS代码应该怎么改呢?

for(var i = 1; i <= monDaynum; i++) {

var subContent = document.createElement("div");

subContent.className = "canChoose";

if(nowDay === i) {

//subContent.style.borderBottomColor = "red";

} else {}

if(i == nowDay) {

subContent.classList.add("today");

}

subContent.innerHTML = i;

el.appendChild(subContent);

}

2017-08-07 16:06