JavaScript 获取元素样式属性以及兼容代码封装
Posted 吃蛋糕的猫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 获取元素样式属性以及兼容代码封装相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { width: 300px; height: 200px; background-color: pink; left: 100px; } </style> </head> <body> <input type="button" id="bt" value="显示效果"/> <div id="dv"> </div> <script src="common.js"></script> <script> my$("bt").onclick = function () { //获取元素左边位置的值 // console.log(my$("dv").offsetLeft); //无法获取 //谷歌，火狐支持 console.log(window.getComputedStyle(my$("dv"), null).left); //IE支持 // console.log(my$("dv").currentStyle.left); }; //获取任意元素的任意属性值 function getStyle(element, attr) { //判断浏览器是否支持这个方法 if(window.getComputedStyle) { return window.getComputedStyle(element, null)[attr]; } else { return element.currentStyle[attr]; } } //测试 // getStyle(my$("dv"), "left"); </script> </body> </html>
以上是关于JavaScript 获取元素样式属性以及兼容代码封装的主要内容，如果未能解决你的问题，请参考以下文章
Javascript的DOM中兼容问题以及解决兼容问题的方法