通过JS(javascript)操作元素的属性(样式)

元素节点属性的操作

获取某一元素节点的所有属性节点[伪数组]

节点.attributes

操作任何属性

(任何,包括自定义的)

获取属性值

节点.getAttribute(‘id,style,class,name等等’)

设置属性值

例子:节点.getAttribute(‘style’,‘background-color:red;’)

移除

节点.removeAttribute(‘属性名’)

设置元素样式

添加和获取

(标签的行内样式,写在style中的)

节点.style.样式名

例子:

​ 节点.style.width=“100px”

​ 节点.style.backgroundColor=‘red’ #驼峰写法 如CSS 中font-size ,这里写作fontSize

获取样式

(标签本身的样式)

非IE浏览器:

window.getcomputedStyle(元素节点).要获取的样式属性

例子: window.getcomputedStyle(元素节点).width

IE浏览器:

节点.currentStyle.要获取的样式属性

操作元素类名

className

节点.className

节点.className=‘类名…’ (全覆盖式)

classList

功能	函数	说明
添加样式	classList.add(“class1”,“class2”)	添加1个或多个
移除样式	classList.remove()	移除1个或者多个
获取样式数量	classList.lentgh	-
添加/移除样式	classList.toggle(‘类名’)	*
是否存在	classList.contains(‘x’)	返回布尔值