众所周知, CSS 样式有三种类型: 行内样式, 内部样式和外部样式, JavaScript 获取 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']
2, 基于非 IE 如火狐谷歌等非行内获取法: 通过 getComputedStyle(element.null / 伪类)[attr]
来源: http://www.css88.com/qa/javascript/11207.html