JavaScript获取DOM元素相关信息和属性

getBoundingClientRect

获取到元素盒模型的一些信息,得到的结果是没有单位的,不包含滚动条的距离,不包含margin，包含border和padding
width 宽度（包含边框）
height 高度（包含边框）
left 从元素最左边到可视区最左边距离
right 从元素最右边到可视区最左边距离
top 从元素的最上边到可视区最上边的距离
bottom 从元素的最下边到可视区最上边的距离

    



    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

给body添加一个高度的样式，从而出现滚动条，但是对盒子无影响

getAttribute

用来获取元素的属性
元素.getAttribute(属性名)

如果参数是一个src或者href的话，打印结果是引号里面的值（相对地址）
取不到js的自定义属性
可以取到html的自定义属性

    

        
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

setAttribute

设置属性
元素.setAttribute(attr,value);
两个元素必须同时出现

    
    

        
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

运行结果截图1

运行结果截图2

运行结果截图3

removeAttribute

删除属性
元素.removeAttrrbute(属性名)

removeAttribute

删除属性
元素.removeAttrrbute(属性名)

    
    

        
    

1
2
3
4
5
6
7
8
9
10
11
12
13

运行结果截图