如果说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设置
本文结束。