老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
更新时间：2018年09月19日 10:27:55 作者：昊晗远昂
大家都知道CSS样式有三种类型：行内样式、内部样式和外部样式，这篇文章主要介绍了javaScript获取CSS样式的方法(兼容各浏览器),需要的朋友可以参考下
众所周知，CSS样式有三种类型：行内样式、内部样式和外部样式，JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法 。
一、行内样式获取相对简单，通过element.style.attr（元素.style.属性）即可获取，示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript获取CSS样式</title>
</head>
<body>
<!-- 给p标签设置行内样式并添加点击事件 -->
<p style='width: 200px;height: 100px;background: pink' onclick='show()'>博客园--开发者的网上家园</p>
<script type="text/javascript">
function show() {
var obj = document.getElementsByTagName('p')[0];
alert(obj.style.width);
}
</script>
</body>
</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样式的方法(兼容各浏览器)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了js简单实现网页换肤功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了input框中的name和id的区别介绍，非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了JavaScript获取XML数据的方法,需要的朋友可以参考下2014-03-03
javascript中Date format(js日期格式化)方法小结
这篇文章主要介绍了javascript中Date format,即js日期格式化的方法.实例总结了三种常见的JavaScript日期格式化技巧,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了javascript实现拖动元素交换位置的方法，类似拼图游戏拖拽卡片效果，感兴趣的小伙伴们可以参考一下2015-11-11
下面小编就为大家带来一篇js实现日期显示的一些操作(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了JS简单操作select和dropdownlist的方法,以实例形式讲述了js针对服务器控件select和dropdownlist的读写操作方法,是js与.net交互的典型应用实例,需要的朋友可以参考下2014-11-11
javascript 三种数组复制方法的性能对比,对于webkit, 使用concat; 其他浏览器, 使用slice.2010-01-01
property 和 attribute非常容易混淆，但实际上，二者是不同的东西，属于不同的范畴，本文就详细的介绍一下JS中attribute和property的区别 ，感兴趣的可以了解一下2022-02-02
引用类型是JavaScript中很重要的内容，通过本文给大家介绍JavaScript学习笔记整理之引用类型，对js引用类型相关知识感兴趣的朋友一起学习吧2016-01-01
最新评论