js-dom读取样式 样式表样式--只读的样式

获取元素当期样式表样式

        语法：元素.currentStyle.样式名     -------------读取当前元首正在显示的样式

currentStyle：只有ie浏览器支持，其他浏览器不支持

                getComputedStyle(box1).width/windows的方法，其他浏览器不支持

getComputedStyle((box1,null).backgroundColor) ；不支持ie8及以下浏览器

    alert(getComputedStyle(box1,null).width);

var obj=getComputedStyle(box1,null);
                    alert(obj.width)

        第一个参数：获取的样式元素

        第二个参数：传递伪元素，一般为null

该方法返回了一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式

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

比如：没有设置width,他不会获到auto,而是一个长度

            var btn02 = document.getElementById("btn02");
                btn02.onclick = function() {
                    var obj=getComputedStyle(box1,null);
                    alert(obj.width)
                };

            window.onload = function() {
                var box1 = document.getElementById("box1");
                var btn01 = document.getElementById("btn01");
                btn01.onclick = function() {
                    box1.style.width = "300px";
                    box1.style.backgroundColor = "red";

                };
                
                var btn02 = document.getElementById("btn02");
                btn02.onclick = function() {
                    alert(getComputedStyle(box1).width);
                    alert(getComputedStyle(box1).backgroundColor);
                };
            }

 解决：js获取样式的兼容性问题：中括号取得对象中的属性：判断浏览器是否具有此方法

getComputedStyle---------是变量 如果找不着会报错

window.getComputedStyle---是属性，找不着返回undefined

			//obj获取的元素 name 样式名
			function getStyle(obj,name){
				if(window.getComputedStyle){
					return getComputedStyle(obj,null)[name];//正常 
				}
				 return obj.currentStyle[name];//IE8
			}