JS获取、设置CSS样式的方法（外部Style、外联CSS样式)

一般我们经常用js去设置 或 获取的都是元素的内联（行内）样式！

例如：

dom.style.width;  //获取行内样式!

dom.style.display = 'block'; //修改行内样式!

 

那么 如何设置 或 获取 外部样式、嵌入样式呢？

 

其是：在JS中有两种方法可以获取外部样式：

• 通过 getComputedStyle() 方法获取

• 通过 currentStyle() 方法获取（ IE8 以下使用）

 

JS代码如下：

我已经进行了简单的封装，类似jQuery一样的可以设置 或 获取 元素的外部css样式！

            function Style(el) {
                if (!el) {
                    console.error('请传入DOM元素！');
                    return false;
                };
       
                this.css = function () {
                    var arg = arguments;
                    var dom = document.querySelector(el);

                    if (1 < arg.length) {
                        //设置行内style样式
                        dom.style[arg[0]] = arg[1];
                    } else {
                        //获取非行内style样式
                        return dom.currentStyle ? dom.currentStyle[arg[0]] : getComputedStyle(dom, null)[arg[0]];
                    };
                };
            };

            function $(el) {
                return new Style(el);
            };

            //获取非行内style样式
            console.log($('body').css('color'));
            console.log($('#box').css('width'));
            console.log($('.btn').css('font-size'));
            

            //设置行内style样式
            $('span').css('font-size', '50px');
            $('span').css('color', 'green');
            $('.btn').css('background', 'red');