老生常谈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可通过封装一个html" target="_blank">函数，实现多次调用，
切记：非行内样式获取法，只能获取不能设置。
总结
以上所述是小编给大家介绍的老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍老生常谈JavaScript数组的用法，包括了老生常谈JavaScript数组的用法的使用技巧和注意事项，需要的朋友参考一下 JavaScript数组简介 JavaScript中的数组与其他语言中的数组是不同的，主要体现在： 数组中存储的各项可以是不同类型的数据 数组的大小是动态变化的，当新增项时或移除项时可以动态的改变大小来容纳当前数据项 在JavaScript中创建数组 在Jav
-
本文向大家介绍jQuery+css实现的时钟效果(兼容各浏览器)，包括了jQuery+css实现的时钟效果(兼容各浏览器)的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery+css实现的时钟效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 这里没有做太多的修饰，简单的实现了一下功能，另外，用的是js的setTimeout方法，当时间长了之后，会有一定的延时，建议，在每隔
-
本文向大家介绍老生常谈JavaScript 正则表达式语法，包括了老生常谈JavaScript 正则表达式语法的使用技巧和注意事项，需要的朋友参考一下 JavaScript定义正则表达式有两种方法。 1.RegExp构造函数 var pattern = new RegExp("[bc]at","i"); 它接收两个参数：一个是要匹配的字符串模式，另一个是可选的标志字符串。 2.字面量 var pa
-
本文向大家介绍老生常谈JavaScript 函数表达式，包括了老生常谈JavaScript 函数表达式的使用技巧和注意事项，需要的朋友参考一下 JavaScript中创建函数主要有两种方法：函数声明和函数表达式。这两种方式都有不同的适用场景。这篇笔记主要关注的是函数表达式的几大特点以及它的使用场景，下面一一描述。 主要特点 •可选的函数名称 函数名称是函数声明的必需组成部分，这个函数名称相当于一个
-
本文向大家介绍jQuery+css实现的tab切换标签(兼容各浏览器)，包括了jQuery+css实现的tab切换标签(兼容各浏览器)的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery+css实现的tab切换标签。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQ
-
本文向大家介绍JS实现兼容各种浏览器的获取选择文本的方法【测试可用】，包括了JS实现兼容各种浏览器的获取选择文本的方法【测试可用】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现兼容各种浏览器的获取选择文本的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧