js中创建class样式css样式

参考文章 https://www.cnblogs.com/stephenykk/p/5406614.html

最近特别无聊，写了些脚本优化下浏览器浏览体验

 

单节点，或者一个节点，我们修改样式是这样的

let kuai = document.querySelector('.xxx')
kuai.style.backgroundColor = 'black'

1.获取节点

2.通过节点style修改指定样式

 

但是如果需要设定的样式有几十个，相同的样式，并且这种样式在页面中的css是没有的，那么就需要使用js动态创建一个css样式来供节点调用

于是乎，第一种方法 使用 document.createStyleSheet  因为 IE 仅有  chrom不支持 不多说

 

正餐！！：通过创建style节点，再赋值

1.创建style，并写入class，再添加进head

            let style = document.createElement('style')
            style.type = 'text/css';
            style.innerHTML = `
                 .single_kuai_light{
                     height:70px;
                     width:70px;
                 }
            `
            document.querySelector('head').appendChild(style)

2.找到节点后，通过classList 添加

let kuai = document.createElement('div')
kuai.classList.add('single_kuai_light')