08.JS-获取行间、内联、外联样式属性

 

这篇文章是我自己在学习js过程中做的笔记，如果有错误或者遗漏的请评论告诉我。希望大家一起学习！

笔记内容主要有:获取行间、内联、外联样式属性

• 获取行间样式

        element.style.属性

• 获取内联 外联样式 window.getComputedStyle(element, pseudoElement)

        getComputedStyle 和 element.style 的异同：

        相同点就是：

            二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。

        而不同点就是：

            element.style 读取的只是元素的行间样式，即写在元素的 style 属性上的样式；

            而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
        
            element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。

            而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式

        兼容性：

            关于 getComputedStyle 的兼容性问题，在 Chrome 和 Firefox 是支持该属性的，同时 IE 9 10 11 

            也是支持相同的特性的，IE 8并不支持这个特性。 IE 8 支持的是 element.currentStyle 

            这个属性，这个属性返回的值和 getComputedStyle 的返回基本一致，只是在 float 的支持上，IE 8 

            支持的是 styleFloat,这点需要注意。

 

   下面是封装好的一个函数（获取样式  兼容IE和非IE）
    obj:要获取的对象
    css：获取对象的属性  

 function getCss(obj,css){

        if (obj.currentStyle) {  //兼容IE8以下

            return obj.currentStyle[css];

        }else{

            return getComputedStyle(obj, null)[css];
        }
    }