2019-09-25 JS操作CSS

前言

需要动态添加一个class类给一个元素,需要做好兼容性,并且通过后台取得结果动态修改class类的动画

学习参考

网道 - CSS 操作

JS操作CSS的总结

1. 行内样式的操作
2. 浏览器计算后的样式
   2.1 window.getComputedStyle(元素,伪类)
   2.2 返回的是绝对值:长度是px单位,颜色是rgb(a)
   2.3 简写无效
   2.4 属性驼峰
3. <link> & <style>样式
   3.1 document.styleSheets 会返回link+style样式列表数组
   3.2 document.styleSheets[0].cssRules 会返回css规则列表数组
   3.3 document.styleSheets[0].insertRule('#block { color: white }', 0);
   3.4 document.styleSheets[0].deleteRule(0);
4. 添加样式表

    // 写法一
    var style = document.createElement('style');
    style.setAttribute('media', 'screen');
    style.innerHTML = 'body{color:red}';
    document.head.appendChild(style);
                            
    // 写法二
    var style = (function () {
        var style = document.createElement('style');
        document.head.appendChild(style);
        return style;
    })();
    style.sheet.insertRule('.foo{color:red;}', 0);

    // 外部样式
    var linkElm = document.createElement('link');
    linkElm.setAttribute('rel', 'stylesheet');
    linkElm.setAttribute('type', 'text/css');
    linkElm.setAttribute('href', 'reset-min.css');
    document.head.appendChild(linkElm);

后记

推荐看下前边网道的CSS操作，非常纤细