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"));