Dom的样式操作和属性操作

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

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

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

对于dom的样式操作：

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

 1 
 2 "en">
 3 
 4 
 5     "UTF-8">
 6     
 7 
 8 
 9 
10     
"test" style="color: red">
11         22
12     
13     
17 
18 
19 

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

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

 1 
 2 "en">
 3 
 4 
 5     "UTF-8">
 6     
 7     
12 
13 
14 
15     
"test">
16         22
17     
18     
23 
24 
25 

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

对于dom的属性的操作：

1）使用getAttribute这个api读取

2）使用setAttribute这个api设置

本文结束。

转载于:https://www.cnblogs.com/zhensg123/p/9015357.html