[javascript]javascript取得html元素，取得html样式，修改html样式

一.取得html元素

详情见：https://www.jb51.net/article/116460.htm

1.通过ID获取（getElementById）

document.getElementById('id')

 

2.通过name属性（getElementsByName）

document.getElementsByName('name')

 

3.通过标签名（getElementsByTagName）

document.getElementsByTagName('p')

 

4.通过类名（getElementsByClassName）

document.getElementsByClassName('class')

 

5.获取html的方法（document.documentElement）

document.documentElement是专门获取html这个标签的。

document.documentElement

浏览器控制台返回结果：

6.获取body的方法（document.body）

document.body是专门获取body这个标签的。

document.body

浏览器控制台返回结果：

7.通过选择器获取一个元素（querySelector）

document.querySelector('div .class')

 

8.通过选择器获取一组元素（querySelectorAll）

ocument.querySelectorAll('div .class')

 

二.取得html样式

取得元素的style即可：

document.getElementById('id').style

如：取得高度

document.getElementById('id').style.height

也可使用方法getBoundingClientRect()，取得更精确的信息：

document.getElementById('id').getBoundingClientRect().width

 

三.修改html样式

修改元素的style即可：

document.getElementById('id').style.height='10px'