javascript 学习分析及总结

造一个轮子---获取计算后样式

一、思路分析

1.主要考虑到兼容浏览器的问题，即高级浏览器和IE6、IE7、IE8

高级浏览器写法：window.getComputedStyle(oDiv).getPropertyValue("width");

getComputedStyle(oDiv).getPropertyValue("width");

getComputedStyle(oDiv).getPropertyValue("padding-left");

getComputedStyle(oDiv)["padding-left"];

I E6、IE7、IE8写法： oDiv.currentStyle.width;

oDiv.currentStyle.paddingTop;    

oDiv.currentStyle["paddingTop"];    

2.能力检测：将用户输入的property进行检测，针对高级浏览器，主要看是不是驼峰，如果是，转换为连字符写法。针对IE6\IE7\IE8 ，因为只认识驼峰，所以要防止输入“-” ，即改为驼峰式。

二、代码部分

//封装一个函数 获取计算后样式

function fecthComputedStyle(obj,property) {

if (window.getComputedStyle) {

property = property.replace(/([A-Z])/g,function(match,$1){

return "-" + $1.toLowerCase();

});

return window.getComputedStyle(obj)[property];

}else{

property = property.replace(/\-([a-z])/g,function(match,$1){

return $1.toUpperCase();

});

return obj.currentStyle[property];

}

}

var oDiv = document.getElementById("box");