JavaScript中如何获取属性&封装函数
2017-04-10 本文已影响39人
NikiGuo
第一种方法
1.var demo = document.getElementById("demo");//对象的id名
console.log(demo.style.left);
第二种方法
logStyle("demo", "left");
function logStyle(id, attr) {
var demo = document.getElementById(id);
console.log(demo.style[attr]);//使用[attr]是因为该函数可以获取多个属性.
}
第二种方法中的封装 获取计算后样式属性值的兼容函数
//封装函数是为了兼容不同的浏览器版本
1.
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}
2.
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj, null)[attr];
}
获取计算后样式的方法 (不仅是行内元素的样式的方法)
以id名为demo,属性left为例
window.getComputetedStyle(demo,null).left // 火狐,谷歌,ie9,以上都支持
demo.currentStyle.left ie6.7.8及新版浏览器都支持
难点:attr的存在即书写方式[attr]
