Vue 在head 动态增加style 节点

幼稚猿

于 2021-11-26 10:37:01 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue HTML 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/MySundays/article/details/121554549

vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

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

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

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)  // 删除