Vue 在head 动态增加style 节点

幼稚猿

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

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/mysundays/article/details/121554549

版权

vue 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

幼稚猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 在head 动态增加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的idthis.cssDom.innerHTML = this.cssValuehead.appendChil.
复制链接

扫一扫

专栏目录