通过JS修改元素样式

语法：  元素,style.样式名 = 样式值

var box1=document.getElementById("box1");

 box1.syle.width="100px";

注意：如果CSS样式名含有 “-”如：background-color，这种名称在JS中不合法，需要将样式名修改为驼峰命名法，

backgroundColor。

style设置的样式都是内联样式，有较高的优先级，所以通过JS修改的样式往往回来立即显示。

如果样式中有！important，表示优先级更高，就不会被修改。

读取样式：语法：元素.style.样式名

通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。

如何获取元素当前显示的样式？

语法：元素.currentStyle.样式名 （只支持ie）

其他浏览器使用getComputedStyle()。这个方法是window的方法。IE9及以上支持。

需要两个参数getComputedStyle(要获取样式的元素，可以传递一个伪元素，一般为null)。

该方法返回一个对象，对象中封装了当前元素对应的样式。然后通过对象.样式名获取

var obj = getComptedStyle(box1,null); 

alert(obj.width);

如果获取的yan格式没有设置，则会获取到真实的值而不是默认值。

通过上两种方法读取的样式都是只读的，如果要修改必须通过style属性。

为满足两种情况：

   function getStyle(obj,name){

   if(window.getComputedStyle){

   return getComputedStyle(obj,null)[name];

  }else{

   return obj.currentStyle[name];

  }

  }