一,修改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