兼容性封装02--通过js读取css样式

区别

getComputedStyle(元素)只能高级浏览器使用,ie低版本不能使用
元素.currentStyle 只有ie能用,其它浏览器不能使用.

• 解决方案:

让高级浏览器用getComputedStyle方法
让ie低版本用currentStyle方法

案例说明

div {
	width: 300px;
	height: 500px;
	background: pink;
}

<button id="btn">读取</button>
<div id="box"></div>

//获取元素
var btn = document.getElementById('btn');
var box = document.getElementById('box');

/**
 * 兼容性封装读取元素样式
 * @param {元素对象} obj
 * @param {属性名} pro
 */
function getStyle(obj,pro) {
	if(window.getComputedStyle) {
		//js会认为给对象动态添加了一个pro属性,所以要用`[]`设置和访问对象属性的方式。		
		//window.getComputedStyle(obj).pro; 
		return window.getComputedStyle(obj)[pro];
	} else {
		return obj.currentStyle[pro];
	}
}

//注册点击事件 ，读取元素样式
btn.onclick = function() {	
	// console.log(box.style.width); //元素.style.属性 只能读取行内样式
	// 读取内联样式需要使用getComputedStyle 和currentStyle
	
	//用变量接收封装函数的返回值,传递的实参分别是元素对象和属性字符串
	var str = getStyle(box,'width');
	console.log(str); // 输出300px
}