Vue 在head 动态增加style 节点

最新推荐文章于 2023-09-13 17:54:22 发布

原创最新推荐文章于 2023-09-13 17:54:22 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

这段代码展示了如何使用JavaScript动态地向文档<head>中添加和删除CSS样式。首先，通过getElementsByTagName获取head元素，然后创建style标签并设置其类型和ID。接着，将CSS样式内容赋值给style标签，并将其添加到head中。当需要删除样式时，调用removeChild方法移除style元素。

const head = document.getElementsByTagName('head')[0]
this.cssDom = document.createElement('style')
this.cssDom.setAttribute('type', 'text/css')
this.cssDom.setAttribute('id', `css-add`)  // 增加style的id
this.cssDom.innerHTML = this.cssValue
head.appendChild(this.cssDom)  // 增加

head.removeChild(this.cssDom)  // 删除