原生js动态添加样式表

最新推荐文章于 2024-08-19 14:11:37 发布

fairyIer

最新推荐文章于 2024-08-19 14:11:37 发布

阅读量9.7k

点赞数

分类专栏： JavaScript html css 文章标签：动态添加样式原生js动态添加样式原生js动态添加样式表

本文链接：https://blog.csdn.net/fairyier/article/details/80196378

版权

JavaScript 同时被 3 个专栏收录

42 篇文章 1 订阅

订阅专栏

html

18 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

原生js给html动态添加样式表：

1.创建标签<style>添加一张内置样式表
            var style1 = document.createElement('style');
            style1.innerHTML = 'body{color:red}#top:hover{background-color: red;color: white;}';
            document.head.appendChild(style1);

2.另一种是添加外部样式表，即在文档中添加一个link节点，然后将href属性指向外部样式表的URL
            var link1 = document.createElement('link');
            link1.setAttribute('rel', 'stylesheet');
            link1.setAttribute('type', 'text/css');
            link1.setAttribute('href', 'reset-min.css');
            document.head.appendChild(link1);