<script type="text/javascript">
// 获取元素
var oBox = document.getElementById("box");
var oPic = document.getElementById("pic");




/*能力检测函数 只要用户输入要计算的元素对象和属性名 都可以正常输出计算后的样式


参数：对象obj val(不管是驼峰或短横)
返回值：计算后样式属性值
*/


// oBox.innerHTML = computedStyle(oPic,"borderTopWidth");
oBox.innerHTML = computedStyle(oPic,"border-top-width");





// 声明函数 小括号中书写形参
function computedStyle(obj , val) {
// 检测是否认识window
if(window.getComputedStyle){
// 高级浏览器
// 中括号属性名都可以，人为定义使用短横
// 如果是borderTopColor 改为border-top-color
val = val.replace(/([A-Z])/g,function(match, $1) {
return  "-" + $1.toLowerCase();
});
// 计算后的样式属性
return window.getComputedStyle(obj)[val];
}else{
// IE6,7,8 属性名只能使用驼峰
// 当用户输入border-width 需要改为borderWidth
val = val.replace(/-([a-z])/g,function(match, $1){
return $1.toUpperCase();
});
// 计算后的样式属性
return obj.currentStyle[val];
}
}
</script>