<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装获取css属性</title>
<style>
h1{
width:300px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<h1>我是高100px，宽300px的红色长方形</h1>
<script type="text/javascript">
var h1 = document.getElementsByTagName('h1')[0];
//标准浏览器
console.log( window.getComputedStyle(h1)['width']);
console.log( window.getComputedStyle(h1).height);
//IE浏览器
console.log(h1.currentStyle.width);
console.log(h1.currentStyle.height);
//封装函数
//ele表示元素，zxc表示属性
functiong abc (ele,zxc){
//第一种
var qwe = window.getComputedStyle( ele ).zxc||ele.current.zxc
console.log(qwe);
//第二种
if (window.getComputedStyle( ele )){
window.getComputedStyle( ele ).zxc
}else{
ele.current.zxc
}
}
</script>
</body>
</html>这样封装对不对？
怪我咯2017-06-26 10:58:44
你要先判断函数存不存在
function getStyle(elem, attr) {
let style;
if (window.getComputedStyle) { // 标准
// 防止 elem === document
let view = (elem.ownerDocument || elem).defaultView;
if (!view || !view.opener) {
view = window;
}
style = window.getComputedStyle(elem)[attr];
} else if (document.documentElement.currentStyle) { // IE
style = elem.currentStyle[attr];
}
elem = null;
return style;
}