微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

仅使用 Javascript 更新 CSS 伪元素值

如何解决仅使用 Javascript 更新 CSS 伪元素值

我可以使用 javascript 更新“内容”值吗?

所以基本上我想使用 javascript 更新 CSS 内容值。

function x(){
             var x = document.getElementById("textx").innerText;
             document.getElementById("xtra::before").style.content=x

         }
.outerContainner{
            width: 500px;
            height: 80px;
            position: relative;
            background-color: chocolate;
            color: white;
            padding:5px 12px;
            
            /*-----------------*/

            font-family: Verdana,Geneva,Tahoma,sans-serif;
            text-transform: uppercase;
            
        }
        .innerContainner{
            width:300px;
            height: 80px;
            background-color: cornflowerblue;
            right: 0;
            position: absolute;


        }
        .innerContainner::before {
            content: 'hello world';
            
        }
        #textx{
            display:none;
        }
<body onload="x()">
        <div>
            <div class="textx" id="textx">hello</div>
            <div class="outerContainner">
                <div class="innerContainner" id="xtra">

                </div>
                
            </div>
        </div>
    </body>

我想在内容之前将文本“hello”放入 CSS,并希望在页面加载时更改值/添加一个新字符串。有没有办法做到这一点?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。