Dom的样式操作和属性操作

如果说web的研究对象是html和css，那么整个dom结构，包含html树和dom树的dom结构才是研究对象，而在整个页面呈现上面，js起到的作用则是异步的用户行为。

按照上面整个思路，获取dom元素，修改dom相关的样式和属性，就显得无比重要了。博客里面已经有讲过关于dom对象文章：原生js操作Dom节点:CRUD，本文主要讲解dom样式的操作和属性的操作。

操作的含义包含读取和修改。

对于dom的样式操作：

1）通过ele.style获取，例如

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>修改以及读取场景</title>
 7 </head>
 8 
 9 <body>
10     <div id="test" style="color: red">
11         22
12     </div>
13     <script type="text/javascript">
14         var color=document.getElementById("test").style.color;
15         alert(color);
16     </script>
17 </body>
18 
19 </html>

但这种方式的局限性是，只有当样式为行内样式时候，才能够获取到，否则不可以。

2）一般的获取精准样式的方式使用window的api，getComputedStyle，例如

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>修改以及读取场景</title>
 7     <style type="text/css">
 8         #test{
 9             color:red;
10         }
11     </style>
12 </head>
13 
14 <body>
15     <div id="test">
16         22
17     </div>
18     <script type="text/javascript">
19         var color=document.getElementById("test");
20 
21         alert(window.getComputedStyle(color,null).color);
22     </script>
23 </body>
24 
25 </html>

至于修改样式，直接使用el.style[name]=value就可以搞定。

对于dom的属性的操作：

1）使用getAttribute这个api读取

2）使用setAttribute这个api设置

本文结束。