JS 属性操作的标准方法

时雨.`

已于 2022-05-16 21:52:21 修改

阅读量977

点赞数 1

分类专栏： JS知识点总结文章标签： javascript 前端 html

于 2022-05-16 21:51:27 首次发布

原文链接：https://wangdoc.com/javascript/dom/attributes.html#elementgetattribute

版权

DOM 属性操作 JavaScript 事件处理元素节点

关键词由CSDN通过智能技术生成

JS知识点总结专栏收录该内容

11 篇文章 0 订阅

订阅专栏

概述

元素节点提供六个方法，用来操作属性。

getAttribute()
getAttributeNames()
setAttribute()
hasAttribute()
hasAttributes()
removeAttribute()

这有几点注意。

（1）适用性

这六个方法对所有属性（包括用户自定义的属性）都适用。

（2）返回值

getAttribute()只返回字符串，不会返回其他类型的值。

（3）属性名

这些方法只接受属性的标准名称，不用改写保留字，比如for和class都可以直接使用。另外，这些方法对于属性名是大小写不敏感的。

var image = document.images[0];
image.setAttribute('class', 'myImage');

上面代码中，setAttribute方法直接使用class作为属性名，不用写成className。

Element.getAttribute()

Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。

// HTML 代码为
// <div id="div1" align="left">
var div = document.getElementById('div1');
div.getAttribute('align') // "left"

Element.getAttributeNames()

Element.getAttributeNames()返回一个数组，成员是当前元素的所有属性的名字。如果当前元素没有任何属性，则返回一个空数组。使用Element.attributes属性，也可以拿到同样的结果，唯一的区别是它返回的是类似数组的对象。

var mydiv = document.getElementById('mydiv');

mydiv.getAttributeNames().forEach(function (key) {
  var value = mydiv.getAttribute(key);
  console.log(key, value);
})

上面代码用于遍历某个节点的所有属性。

Element.setAttribute()

Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。该方法没有返回值。

// HTML 代码为
// <button>Hello World</button>
var b = document.querySelector('button');
b.setAttribute('name', 'myButton');
b.setAttribute('disabled', true);

上面代码中，button元素的name属性被设成myButton，disabled属性被设成true。

这里有两个地方需要注意，首先，属性值总是字符串，其他类型的值会自动转成字符串，比如布尔值true就会变成字符串true；其次，上例的disable属性是一个布尔属性，对于<button>元素来说，这个属性不需要属性值，只要设置了就总是会生效，因此setAttribute方法里面可以将disabled属性设成任意值。

Element.hasAttribute()

Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性。

var d = document.getElementById('div1');

if (d.hasAttribute('align')) {
  d.setAttribute('align', 'center');
}

上面代码检查div节点是否含有align属性。如果有，则设置为居中对齐。

Element.hasAttributes()

Element.hasAttributes方法返回一个布尔值，表示当前元素是否有属性，如果没有任何属性，就返回false，否则返回true。

var foo = document.getElementById('foo');
foo.hasAttributes() // true

Element.removeAttribute()

Element.removeAttribute方法移除指定属性。该方法没有返回值。

// HTML 代码为
// <div id="div1" align="left" width="200px">
document.getElementById('div1').removeAttribute('align');
// 现在的HTML代码为
// <div id="div1" width="200px">

以上是网道对相关方法的详细解释；

下面是一个用于添加类的一个小用例：选择电影票座位和取消

点击一次选定座位，再点击一次取消。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .all{
            margin-left:20px ;
            width: 600px;
            border: 1px solid black;
        }
        ul{

            width: 530px;
            margin: 10px auto;
            display: grid;
            grid-template-columns: 80px 80px 80px 80px 80px 80px;
            list-style-type: none;
            grid-gap:10px
        }
        li{
            margin: 0 auto;
            width: 80px;
            height: 50px;
            border: 1px solid black;
        }
        .center{
            width: 200px;
            height: 100px;
            border: 1px solid black;
            margin: 10px auto;
            line-height: 100px;
            text-align: center;
            font-size: 25px;
        }
        .click{
            background-color: aqua;
        }

    </style>
    <script>
        window.onload=function(){
            var li=document.getElementsByTagName("li");
            for(var i=0;i<li.length;i++){
                li[i].onclick=function(){
                     var res=this.getAttribute('class');//Element.getAttribute方法返回当前元素节点的指定属性
                     if(!res){
                         this.setAttribute('class','click');//利用setAttribute添加类
                         this.innerText="座位已选";
                     }else{
                        this.setAttribute('class','');//利用setAttribute清空类
                         this.innerText="";

                     }
                }
            }

        }
    </script>
</head>
<body>
    <div class="all">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>    
    </ul>
    <div class="center">屏幕中央</div>
</div>
</body>
</html>

时雨.`

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS 属性操作的标准方法

概述元素节点提供六个方法，用来操作属性。getAttribute() getAttributeNames() setAttribute() hasAttribute() hasAttributes() removeAttribute()这有几点注意。（1）适用性这六个方法对所有属性（包括用户自定义的属性）都适用。（2）返回值getAttribute()只返回字符串，不会返回其他类型的值。（3）属性名这些方法只接受属性的标准名称，不用改写保留字，比如for和clas
复制链接

扫一扫

专栏目录