js访问CSS的2种方法（点法和中括号法的区别），内含获取属性的兼容写法

1.1 js 经常使用 访问 CSS 属性 

咱们访问获得css 属性，比较经常使用的有两种：

    1. 利用点语法

       box.style.width      box.style.top    

     点语法能够获得 width  属性  和 top属性  带有单位的。 100px

     可是这个语法有很是大的缺陷，  不变的。

     后面的width  和 top  没有办法传递参数的。

      var w = width;

      box.style.w     

   2. 利用 []  访问属性

      语法格式:  box.style[“width”]   

                元素.style[“属性”];

      console.log(box.style["left"]);

       最大的优势  ：  能够给属性传递参数

 

 

 

1.2 获得css 样式  

咱们想要得到css 的样式， box.style.left    box.style.backgorundColor

可是它只能获得   行内的样式。

可是咱们工做最多用的是 内嵌式 或者 外链式 。

怎么办？

   核心： 咱们怎么才能获得内嵌或者外链的样式呢？  

  1.   obj.currentStyle   ie  opera  经常使用

外部（使用<link>）和内嵌（使用<style>）样式表中的样式（ie和opera）

2 .window.getComputedStyle("元素", "伪类")     w3c

两个选项是必须的， 没有伪类 用 null 替代

3 兼容写法 ：

    咱们这个元素里面的属性不少， left  top  width  ===

 咱们想要某个属性， 就应该 返回改属性，全部继续封装 返回当前样式的 函数。

1   var demo = document.getElementById("demo");

1     function getStyle(obj,attr) {  //  谁的      那个属性

2         if(obj.currentStyle)  // ie 等

3         {

4             return obj.currentStyle[attr];  

5         }

6         else

7         {

8             return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器

9         }

10     }

11     console.log(getStyle(demo,"width"));