WebAPI(part6)--自定义属性操作-CFANZ编程社区

学习笔记，仅供参考，有错必究

文章目录

Web API

自定义属性操作

获取属性值
设置属性值
移除属性

Web API

自定义属性操作

获取属性值

获取属性值的两种方式：

//第1种
element.属性
//第1种
element.getAttribute('属性');

区别：

获取方式	区别
`element.属性`	`element.属性`只能获取元素自带的属性，比如id, class
`element.getAttribute('属性');`	`element.getAttribute('属性');`主要获取自定义的属性，比如我们自己定义`data-index`属性，就可以通过这种方式获取

举个例子

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <div id="demo" data-index="1" class="nav">hh</div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('data-index'));
    </script>

</body>

</html>

查看DevTools：

WebAPI(part6)--自定义属性操作_js

设置属性值

设置属性值的两种方式：

//第1种
element.属性 = '值'
//第2种
element.setAttribute('属性', '值');

区别：

获取方式	区别
`element.属性 = '值'`	`element.属性 = '值'`只能设置元素自带的属性，比如id, class
`element.setAttribute('属性', '值');`	`element.getAttribute('属性');`设置自定义的属性，比如我们自己定义`data-index`属性，就可以通过这种方式设置

举个例子

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <div id="demo" data-index="1" class="nav">hh</div>
    <script>
        var div = document.querySelector('div');

        console.log(div.id);
        console.log(div.className);
        console.log(div.getAttribute('data-index'));

        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'your-body';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('data-index', 2);

        console.log(div.id);
        console.log(div.className);
        console.log(div.getAttribute('data-index'));
    </script>

</body>

</html>

查看DevTools：

WebAPI(part6)--自定义属性操作_属性值_02

移除属性

移除属性：

div.removeAttribute('属性');