javascript改变来源 javascript怎么修改元素属性

转载

人类新新 2023-09-01 14:50:36

文章标签 javascript改变来源 setAttribute（） getAttribute() removeAttribute() classList 文章分类 JavaScript 前端开发

JavaScript操作属性节点

属性节点的特征：

1.nodeType值为11

2.parentNode值为null

3.在HTML中不包含子元素

注意：（1）尽管属性也是节点，但却不认为是DOM文档树的一部分。（2）开发人员常用getAttribute（）、setAttribute( )、removeAttribute( )等方法来操作属性。

1、设置属性值

方法：

（1）createAttribute(name)+value+setAttributeNode(属性节点）

（2）setArrtibute(name,value)

（3）点方法：DOM节点.name="value";《特殊属性为，class->className,for->htmlFor》

注意：setArrtibute如果用来设置原来已经存在的类时，新的类值将覆盖掉原来的值，尤其在添加class类时，要先看看原来有没有class类存在，如果有的话，那么只能用添加类的操作，不能用设置类的操作。

实例：

javascript改变来源 javascript怎么修改元素属性_classList

javascript改变来源 javascript怎么修改元素属性_setAttribute（）_02

javascript改变来源 javascript怎么修改元素属性_getAttribute()_03

2.读取属性值

方法：

（1）element.attributes["name"].value

（2）element.getAttributeNode（"name"）.value

（3）element.getAttribute("name"); 返回的是字符串

（4）element.name; 返回字符串；<通过点方法访问,特殊属性：class->className,for->htmlFor>

（5）只能用来读取class的属性值。element.classList; 返回属性列表；

实例：

javascript改变来源 javascript怎么修改元素属性_getAttribute()_04

javascript改变来源 javascript怎么修改元素属性_classList_05

注意：通过getAttribute(),点方法得到的属性值是字符串类型，

当有多个class属性值时，需要利用split（）函数进行字符串切割；

当只有一个class属性值时，element.clsaaList返回值仍旧是数组列表，需要加索引取值：element.classList[0];

3.删除某个属性

方法：

removeAttribute(name);

实例：

javascript改变来源 javascript怎么修改元素属性_javascript改变来源_06

属性节点---对class类属性的操作：classList

上面提到的getAttribute（）、setAttribute( )、removeAttribute( )方法可以对属性节点中的各种属性（id,class,align,data-*）进行设置，读取，移除的操作.

这里的classList仅仅针对class属性进行操作

语法

（1）element.classList.length；返回类列表中类的数量个数

（2）element.classList.add("name1","name2",......);向元素中添加一个或多个类，如果已存在则不会再添加

（3）element.classList.remove("name1","name2",......);删除元素中指定的一个或多个类名，删除不存在的不报错。

（4）element.classList.toggle("name");切换类名：若有则移除，返回false；若无则添加，返回true；

（5）element.classList.contains("name");判断是否包含指定的类型名。true包含，false不包含。

（6）element.classList.item(index);返回指定index值的类名。

自定义属性（data-*）的操作

添加自定义属性方法：

（1）element.setAttribute("data-*);

（2）element.dataset.name="value"

javascript改变来源 javascript怎么修改元素属性_setAttribute（）_07

读取自定义属性的方法：

（1）element.getAttribute("name");

（2） element.dataset.name;

javascript改变来源 javascript怎么修改元素属性_javascript改变来源_08

JS获取和设置CSS样式的方法

这里javascript获取和设置的CSS样式均体现在指定DOM节点的内联style样式；

注意：回流和重绘的触发，尽量不要一个一个的改变样式属性

1.设置CSS样式

（1）element.style.name="value";

<div id="box" class="wrap demo">javascript操作属性节点</div>
    <script>
        var element=document.querySelector("#box");
        element.style.height="200px";       //样式属性名无“-”连字符；
        element.style.fontSize="20px";      //有连字符“-”，写成驼峰形式；
        element.style["fontWeight"]="700";  //有连字符“-”，用中括号"[]"处理；

javascript改变来源 javascript怎么修改元素属性_getAttribute()_09