重温JavaScript获取CSS样式的方法(兼容各浏览器)
程序员文章站
2023-11-25 15:30:10
众所周知,CSS样式有三种类型:行内样式、内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 。 一、行内样式获取相对简单,通过element.style.attr(元素.style.属性)即可获取,示例: 运行: 通过element.styl ......
众所周知,css样式有三种类型:行内样式、内部样式和外部样式,javascript获取css样式时分为两种情况:行内样式获取法 和 非行内样式获取法 。
一、行内样式获取相对简单,通过element.style.attr(元素.style.属性)即可获取,示例:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>javascript获取css样式</title> 6 </head> 7 <body> 8 <!-- 给p标签设置行内样式并添加点击事件 --> 9 <p style='width: 200px;height: 100px;background: pink' onclick='show()'>博客园--开发者的网上家园</p> 10 <script type="text/javascript"> 11 function show() { 12 var obj = document.getelementsbytagname('p')[0]; 13 alert(obj.style.width); 14 } 15 </script> 16 </body> 17 </html>
运行:
通过element.style.attr即可获取行内样式属性值,也可设置属性值,形式如:obj.style.width = 300 + 'px';
二‘、非行内样式获取法,因浏览器的不同又分为两种,即基于ie浏览器的 和 非ie浏览器的如谷歌火狐等。
1、基于ie浏览器的非行内获取法:通过 element.currentstyle['attr']
ie运行结果:
2、基于非ie如火狐谷歌等非行内获取法:通过 getcomputedstyle(element.null/伪类)[attr]
火狐运行结果:
二者兼容定法:
总结:以上就是javascript获取css样式的方法,其中获取非行内样式兼容ie和非ie可通过封装一个函数,实现多次调用,
切记:非行内样式获取法,只能获取不能设置。
推荐阅读
-
重温JavaScript获取CSS样式的方法(兼容各浏览器)
-
重温JavaScript获取CSS样式的方法(兼容各浏览器)
-
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
-
js 获取屏幕各种宽高的方法(浏览器兼容)_javascript技巧
-
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)_javascript技巧
-
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)_javascript技巧
-
原生javascript获取各种CSS样式属性的方法实例总结
-
原生javascript获取各种CSS样式属性的方法实例总结
-
javascript实现客户端兼容各浏览器创建csv并下载的方法_javascript技巧
-
JavaScript兼容浏览器获取元素的样式