js 修改动态修改class css样式

最新推荐文章于 2025-04-03 12:43:45 发布

永恒y

最新推荐文章于 2025-04-03 12:43:45 发布

阅读量2.8k

点赞数 2

文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/weixin_47996469/article/details/124192469

版权

本文探讨了如何在JavaScript中动态创建和插入CSS样式，通过示例展示了如何使用`let danmakuWrapper`定义样式，并利用`addNewStyle`函数将样式添加到文档中，实现页面元素的实时定制。这种方法在前端开发中常用于实现个性化效果或动态交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//添加类名变量
 let danmakuWrapper = `.danmaku-wrapper{color:${this.danmakuData.color};font-size:${this.danmakuData.height}px;background:${this.danmakuData.bgColor};line-height:1 !important;}`

        function addNewStyle(newStyle) {

//获取样式文件
            var styleElement = document.getElementById('styles_js');

            if (!styleElement) {
//新增样式文件
                styleElement = document.createElement('style');
                styleElement.type = 'text/css';
                styleElement.id = 'styles_js';
                document.getElementsByTagName('head')[0].appendChild(styleElement);
            }
//插入文档流
            styleElement.appendChild(document.createTextNode(newStyle));
        }

        addNewStyle(danmakuWrapper);