元素节点属性的操作
获取某一元素节点的所有属性节点[伪数组]
节点.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’) | 返回布尔值 |