JavaScript自定义getStyle方法获取元素样式
程序员文章站
2022-04-14 23:29:23
兼容性 兼容性如下图所示 ( "摘自 mdn" ) 解决方法 由于getComputedStyle方法在IE浏览器中只兼容IE9及其以上,而IE8和它之前的浏览器则需要使用currentStyle方法来获取样式,所以我们就可以自定义一个getStyle方法来解决兼容性的问题 代码 自定义getSty ......
兼容性
兼容性如下图所示(摘自 mdn)
解决方法
由于getcomputedstyle方法在ie浏览器中只兼容ie9及其以上,而ie8和它之前的浏览器则需要使用currentstyle方法来获取样式,所以我们就可以自定义一个getstyle方法来解决兼容性的问题
代码
自定义getstyle()代码
function getstyle (obj, name) { if (obj.currentstyle) { return obj.currentstyle[name]; } else { return getcomputedstyle(obj)[name]; } }
完整html代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>getstyle</title> <style> div{ width: 200px; height: 200px; background-color: brown; } </style> <script> function getstyle (obj, name) { if (obj.currentstyle) { return obj.currentstyle[name]; } else { return getcomputedstyle(obj)[name]; } } window.onload = function () { // let box = document.queryselector("div"); var box = document.getelementsbytagname("div")[0]; var btn = document.getelementsbytagname("button")[0]; box.style.width = "250px"; box.style.height = "250px"; box.style.backgroundcolor = "skyblue"; btn.onclick = function () { alert(getstyle(box, "backgroundcolor")); }; }; </script> </head> <body> <div></div> <button>fun</button> </body> </html>
运行结果
-
ie8
2.ie11
3.chrome
4.firefox
上一篇: HTML-css样式引用方式
下一篇: Python构建网页爬虫原理分析
推荐阅读
-
JavaScript获取页面元素的常用方法
-
重温JavaScript获取CSS样式的方法(兼容各浏览器)
-
JavaScript操作HTML元素和样式的方法详解
-
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
-
JavaScript / jQuery 设置、获取元素属性 值 设置style样式
-
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
-
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
-
JavaScript自定义getStyle方法获取元素样式
-
vue 获取dom元素的样式方法(height为列子)
-
JS获取并操作iframe中元素的方法_javascript技巧