![[javascript]javascript取得html元素，取得html样式，修改html样式_小戴BOTAOY演示博客](/style/defalut/img/logo-bold.png){kind=logo}
一.取得html元素
详情见：https://www.jb51.net/article/116460.htm
1.通过ID获取（getElementById）
document.getElementById('id')
2.通过name属性（getElementsByName）
document.getElementsByName('name')
3.通过标签名（getElementsByTagName）网址:yii666.com
document.getElementsByTagName('p')
4.通过类名（getElementsByClassName）
document.getElementsByClassName('class')
5.获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的。
document.documentElement
浏览器控制台返回结果：文章地址https://www.yii666.com/article/758308.html
![[javascript]javascript取得html元素，取得html样式，修改html样式](https://img2018.cnblogs.com/blog/1228394/201810/1228394-20181023100637911-1580725103.png)
6.获取body的方法（document.body）
document.body是专门获取body这个标签的。
document.body
浏览器控制台返回结果：
![[javascript]javascript取得html元素，取得html样式，修改html样式](https://img2018.cnblogs.com/blog/1228394/201810/1228394-20181023100808935-811439508.png)
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样式文章来源地址:https://www.yii666.com/article/758308.html
修改元素的style即可：
document.getElementById('id').style.height='10px'