为实现浏览器兼容版的获取元素的实际样式,可以封装一个函数,下面是网易微专业上的一道练习题,后面是我写的代码封装函数。
getStyle函数用于获取元素的实际样式,语法如下:
var cssPropertyValue = getStyle (element, cssPropertyName);
使用示例如下:
getStyle(element, “color”) 返回element元素的显示颜色,如:”rgb(0, 0, 0)”
getStyle(element, “line-height”) 返回element元素的实际行高,如:”30px”
请实现getStyle函数,要求浏览器兼容。
<!DOCTYPE html>
<html>
<head>
<title>getComputedStyle - 获取样式</title>
<style>
div{margin: 20px auto;}
button{padding: 4px 5px;margin-left: 10px;}
input{width: 215px;padding: 4px 5px;border: 1px solid #ababab;border-radius: 3px;box-shadow: 2px 2px 3px #ededed inset;font-size: 14px;font-weight: bold;}
</style>
</head>
<body>
<div>
<input id="mobile0" value="13564782365">
<button id="get0">获取颜色</button>
</div>
<div>
<input id="mobile1" value="13564782365" style="color: red;">
<button id="get1">获取颜色</button>
</div>
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
var Util = (function(document, util) {
util = util || {};
util.addEventListener = function(element, type, listener) {
if (element.addEventListener) {
element.addEventListener(type, listener, false);
} else {
element.attachEvent('on' + type, listener);
}
}
return util;
})(document, Util);
//实现getStyle函数
function getStyle(element,cssPropertyName){
if(window.getComputedStyle){//如果支持getComputedStyle属性(IE9及以上,ie9以下不兼容)
return window.getComputedStyle(element)[cssPropertyName];
}else{//如果支持currentStyle(IE9以下使用),返回
return element.currentStyle[cssPropertyName];
}
}
Util.addEventListener($('get0'),'click',function(){
alert(getStyle($('mobile0'),'color'));
alert(getStyle($('mobile0'),'width'));
});
</script>
</body>
</html>