js获取元素样式嵌入css样式

js获取元素样式（嵌入css样式）

获取实例样板

css:

<style>
    #box{
          width:100px;
          height: 100px;
          background: pink;
        }
</style>

html:
<div id="box"></div>

obj.style.attr

• 只能获取内联样式

alert(box.style.width)

对象.offsetWidth

• JS位置、宽高属性之一
• 可以取得对象的width之类的属性
• 不能取得backgroundColor

alert(box.offsetWidth);
alert(box.offsetWidth);

getComputerStyle(obj).attr

• 可以取得对象的所有属性
• 不支持IE8及以下浏览器 会报错
• 获取颜色的值和路径 都不能用来判断。！！！！！！！
  颜色会变成rgb的形式输出，相对路径会变成绝对路径输出

//getComputedStyle（对象）.属性

alert( getComputedStyle(box).backgroundColor)

obj.currentStyle.attr

• 可以取得对象的所有属性
• 不支持主流浏览器，只能在IE浏览器使用 会报错
  颜色会变成rgb的形式输出，相对路径会变成绝对路径输出

//对象.currentStyle.属性

alert(box.currentStyle.width)

获取对象属性的方法 封装

方法一：

function getStyle(obj,attr) {
    //判断浏览器类型
    if(obj.currentStyle){
        //IE浏览器
        return obj.currentStyle[attr];
    }else{
        //非IE浏览器，返回的是undefined
        return getComputedStyle(obj)[attr];
    }
}

====》转为三目

function getStyle(obj,attr) {
        return obj.currentStyleobj.currentStyle[attr]:getComputedStyle(obj)[attr];

}

===》转为用 || 判断

 function getStyle(obj,attr) {
       //谷歌报错，谷歌没有currentStyle方法
       //return obj.currentStyle[attr]||getComputedStyle(obj)[attr];
    }

//此时，可以只返回对象，使用时，加属性使用
//此时，谷歌不报错，此时只判断有没有currentStyle属性
var b = getStyle(box).width;
    function getStyle(obj) {
        return obj.currentStyle || getComputedStyle(obj);
    }

    alert(b)

方法二

function getStyle(obj,attr) {
        //不能用 || 进行判断
       //return window.getComputedStyle(obj) || obj.currentStyle;

        //可以用三目
       return window.getComputedStyle?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
       /*if(window.getComputedStyle){ //需要写上window，IE报错，不存在，不是undefined。
           //返回的一定不是IE
           return getComputedStyle(obj);
       }else{
           // 一定是IE浏览器
           return obj.currentStyle;
       }*/
    }

需要注意的是：当样式（如：width）当做参数传进函数时，不能用点‘.’操作，只能用[]代替点‘.’操作