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

豆葛

已于 2023-01-18 17:08:29 修改

阅读量226

点赞数

文章标签： javascript 前端 css

于 2023-01-18 17:06:37 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53428952/article/details/128728355

版权

本文介绍了如何在JavaScript中操作元素节点的属性，包括通过节点.attributes获取属性节点，使用getAttribute和setAttribute设置与获取属性值，以及removeAttribute来移除属性。此外，还讲解了如何处理元素的样式，如通过node.style设置行内样式，以及利用window.getComputedStyle和currentStyle获取计算后的样式。对于类名管理，文章提到了className和classList接口，包括添加、移除和切换类名的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素节点属性的操作

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

节点.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’)	返回布尔值