javascript如何调用css样式?

众所周知，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']

1 (2).jpg-600