一，修改css属性
1，修改HTML元素的style属性值：
行内样式
| 属性 | 说明（均支持） |
| style | 后面跟具体的css属性,读取和修改HTML的style的属性值中的某个元素 |
| style.cssText | 读取和 修改HTML的多个style属性值，修改多个css属性更方便 |
/*例子:*/
el=document.getElementById('one');
el.style.fontSize='36px';
el.style.cssText='width:5px;font-size:red';2，修改class属性的值
className属性
直接上例子
<p id="one" class="hot">一</p>
.hot {color:red;}
.cool {color:blue;}
el=document.getElementById('id');
el.className='cool';classList属性的方法：可用于增删改HTML元素的class属性值,可一次修改多个类名。
| 方法 | 说明(ie10-11)部分支持 |
| add(c,c) | 给元素class属性值增加类名c |
| remove(c,c) | 从元素的class属性中伤处类名c |
| replace(o,n) | 将元素class属性值中o替换成n |
| toggle(c) | 切换元素的样式。如果class中有c，删除c;否则添加c |
<p id="one" class="hot bold">一</p>
.hot {color:red;}
.cool {color:blue;}
el.classList.toggle('bold');二，元素的尺寸和位置
（1）内边距区尺寸
| 只读属性 | 说明 |
| clientWidth | 元素内边距区域的宽度的像素值 |
| clientHeight | 元素内边距区域的高度的像素值 |
| clientLeft | 元素的左边框的宽度像素值 |
| clientTop | 元素的上边距的宽度像素值 |
我又用一下我老师的图片哈。
（2）元素的边框尺寸和偏移量
| 只读属性 | 说明 |
| offsetWidth | 元素边框区（含滚动条）的宽度的像素值 |
| offsetHeight | 元素边框区（含滚动条）的高度的像素值 |
| offsetLeft | 元素边框区左边缘到offsetParent元素内边距区的左边缘偏移的像素距离 |
| offsetTop | 元素边框区上边缘到offsetParent元素内边距区的上边缘偏移的像素距离 |
offsetParent是该元素 最近定位祖先（position非static），否则就是视口（官方文档说是body）
fixed元素的offsetParent是视口，后面两个属性适用于父元素是定位元素的子元素
（3）元素大小和相对视口的位置
getBoundingClientRect()返回矩形对象，适用于块元素，适用于块元素
getClientRect()返回矩形对象集合，还可获取行内元素的行盒
以下是相对于视口的距离：
| 只读属性 | 说明 |
| top | 上边框外边缘距离视口上边的像素值 |
| bottom | 下边框外边缘距离视口上边的像素值 |
| left | 左边框外边缘距离视口左边的像素值 |
| right | 右边框外边缘距离视口左边的像素值 |
| width | 边框区宽度的像素值 |
| height | 边框区高度的像素值 |
（4）元素实际内边距区域
| 属性 | |
| scrollWidth | 获取元素内边距区的宽度（包括溢出或者滚动导致不可见的内容） |
| scrollHeight | 获取元素内边距区的高度（包括溢出或者滚动导致不可见的内容） |
| scrollTop | 获取或设置元素上内边距外边缘相对于元素可见内容顶部的像素值 |
| scrollLeft | 获取或设置元素左内边距外边缘相对于元素可见内容左边的像素值 |
（5）元素滚动到视口的某位置
el.scrollIntoView(arg)
无参或者true:上边缘滚动到视口的顶部
false：下边缘滚动到视口的底部
let a=document.querySelector("a");
a.scrollIntoView();//true
a.scrollIntoView(false);（6）获取元素属性的计算值
window.getComputedStyle(元素，可选伪元素)
返回所有css 属性和值的对象
getComputedStyle(el)['width']
getComputedStyle(el).width
getcomputedStyle(el)['line-height']
getComputedStyle(el).lineHeight
getComputeStyle(el,'::after').position