JS DOM基础 操作属性类CSS样式
Posted 飞叶飞花
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS DOM基础 操作属性类CSS样式相关的知识，希望对你有一定的参考价值。
操作属性和类
一、属性节点操作
文本节点内容的获取和修改：
语法：elementNode.attributeName （ 元素节点.属性名）
也可以使用“[ ]” （ 元素节点[属性名]）
注意：一般我们操作属性节点时是不需要获取属性节点的，而是直接通过元素节点获取（/修改）属性节点的值。
特别的，有些属性名称与js关键字或者保留字冲突了，只能用另外的名字：
class属性：要写成className（class是关键字）。
label标签的for属性：写成htmlFor。
通过方法操作属性节点：
element.getAttribute(attributeName) 返回元素节点的指定属性值
element.setAttribute(attributeName, attributeValue) 指定属性设置或更改为指定值
element.removeAttribute(attributeName) 从元素中移除指定属性
ement.hasAttribute(attributeName) 如果元素拥有指定属性，则返回true
二、自定义属性
自定义属性：给html标签写一个自己定义的属性。
虽然给一个对象添加属性很简单，但是在dom中，给元素节点添加自定义的属性节点，html5中要求自定义属性节点应该为‘data-’开头，
比如自定义属性abc，应该写成：
data-abc
这样，要使用时就通过dataset属性即可操作了：
例如：a标签有自定义属性‘abc’
<a href="" data-abc=‘123‘></a> <script> let aEle = document.querySelector(‘a’); console.log(aEle.dataset.abc);//123 </script>
注意：attribute相关方法可以操作任意属性，包括自定义属性（对自定义属性使用时必须加‘data-’）
三、html5中class属性的新操作
使用classList获取一个元素节点上所有的class值：
<body> <p id="test1" class="abc qwe">Lorem ipsum dolor sit amet.</p> <script> let test1 = document.getElementById("test1"); console.log(test1.classList); // DOMTokenList(2) ["abc", "qwe", value: "abc qwe"] console.log(test1.classList[0]); // abc console.log(test1.classList[1]); // qwe </script> </body>
classList相关方法：
element.classList.add(className) 添加一个指定名字的class值
element.classList.remove(className) 删除一个指定名字的class值
element.classList.contains(className) 判断一个指定名字的class值
element.classList.toggle(className) 切换一个指定名字的class值，有则删除，无则添加
操作样式
所有的样式都是字符串。
一、行内样式
单个样式：
element.style.styleName；
例子：divEle.style.width=‘200px’;
element.style.[styleName];
例子：divEle.style[‘width‘]=‘200px’;
注意：样式名称中的‘-’去掉，换成驼峰命名。
学习html，css时要求少用行内样式，就是为了留给js用的，所以，js中操作css，多数情况下是使用该方式。
多个样式：
element.style.cssText 直接获取（/修改）行内样式的整个字符串值
例子： box.style.cssText = "height: 100px; background-color: red;";
注：基本都适用此种方式。
二、样式表样式
样式表（包括内联和外联）：
document.styleSheets[0].rules[0].style.backgroundColor = "blue";
styleSheets：样式表数组（一个style标签为一个样式表）;
rules：所有规则数组（一个“{}”为一条规则）;
所以含义是：第0个样式表中第0条规则中的backgroundColor修改为“blue”。
注：基本不用这种方式。
三、最终样式
由于兼容性问题，最终样式有两种写法：
低版本ie中,用属性currentStyle：
element.currentStyle.styleName ;
火狐和chrome中（现代浏览器），用方法getComputedStyle：
getComputedStyle (Element) .styleName ;
注意：根据需要会使用，但最终样式都是计算出来的样式，为只读的，不可修改。
兼容性封装：
function getStyle(obj, name) { if (obj.currentStyle) {//ie浏览器使用currentStyle[name] return obj.currentStyle[name]; } else {//火狐和chrome浏览器使用getComputedStyle(obj,false)[name] return getComputedStyle(obj, false)[name]; } }
补充：获取元素节点的尺寸和位置
尺寸：
ELement.clientWidth
ELement.clientHeight 内容 + 内边距（填充盒）
ELement.offsetWidth
ELement.offsetHeight 内容 + 内边距 + 边框（边框盒）
位置：
ELement.offsetLeft
ELement.offsetTop 边框盒的位置，位置以第一个定位的父级元素为基准
以上是关于JS DOM基础 操作属性类CSS样式的主要内容，如果未能解决你的问题，请参考以下文章
廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式
web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）
web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）