JavaScript中如何获取属性&封装函数

第一种方法

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]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容