js学习笔记83——获取元素的样式

上一节学习到，通过style获取的样式为内联样式，那如何获取样式表中的样式？

currentStyle

读取当前元素正在显示的样式
语法：元素.currentStyle.样式名
注意：这个只在ie中支持，其他浏览器不支持。

getComputedStyle()

这个和上一个的区别是，它是一个window方法，可直接使用。
注意：ie9以下不支持。
需要两个参数：
1、要获取样式的元素
2、传递一个伪元素。一般传null。
返回值为一个对象，对象中封装了当前元素对应的样式。

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

如果把width设置为100%。

		#box1{
			width: 100%;
			height: 100px;
			background-color: red;
		}

然后获取width

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

可以看到获取的是真实值。

只读

currentStyle和getComputedStyle()获取的样式都是只读的，不能改。

如何兼容ie8

前面两种方法一种是ie的，一直是ie8以上和其他浏览器的。如何兼容两种浏览器呢？

先看一段代码

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

edge结果：

ie8结果：

所以，如果浏览器没有这个方法，则会报错。
用if语句来实现兼容。

			var btn02 = document.getElementById("btn02");
			btn02.onclick = function(){
				getStyle(box1,"width")
			};
		};
		// obj：元素
		// name：样式名
		function getStyle(obj,name){
			if(window.getComputedStyle){
				return getComputedStyle(obj,null)[name];
			}else{
				return obj.currentStyle[name];
			}
		}

edge:

ie8:

这里if语句中的window不能去掉。
有window，则是一个属性，如果这个属性没有，则返回值为undefined。
没有window，则是一个变量，如果这个变量没有，则会报错。

基于这一点，可以把window换成obj。

这段代码还可以用三元运算符改进。