补充：由于不清楚一些属性是内置属性还是自定义属性 所以h5规定 自定义属性使用date-开头作为属性并赋值

案例1:


<body>
    <div date-index="1"></div>
</body>
<script>
    var div = document.querySelector('div');
    console.log(div.getAttribute('date-index'));   //打印为1
</script>

注：如果是自定义属性（自己给的属性）建议使用element.getAttribute('属性') 或者，如果是元素本身自带属性（如id），就使用element.属性

一.获取属性值

element.属性

获取内置属性（元素本身自带的属性

element.getAttribute('属性') //get 得到获取 attribute 属性

主要获得自定义属性 程序员自己添加的属性 被称为自定义属性

案例：获取div盒子属性的id 比如index=‘1’ 就是我们i自己定义的属性

<body>
    <div id="demo" index="1"></div>

    <script>
        var div = document.querySelector('div');
        console.log(div.id);
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>

</body>

二.自定义属性 设置属性值 

element.属性 = ‘值’；

案例1：修改属性id 

<body>
    <div id="demo" index="1"></div>

    <script> 
        var div = document.querySelector('div');
        div.id = 'text';   //设置内置属性值
    </script>

</body>

案例2:修改元素的类名 使用className

<body>
    <div id="demo" index="1" class="box"></div>

    <script>
        var div = document.querySelector('div');
        div.id = 'text'; //设置内置属性值
        div.className = 'boxs';   //修改类名
    </script>

</body>

 element.setAttribute('属性', '值');

案例：修改自定义属性的值 index和class都是自己定义的属性

<body>
    <div id="demo" index="1" class="box"></div>

    <script>
        div.setAttribute('index', 2);
        div.setAttribute('class', 'nav');
    </script>

</body>

三.移除属性值

element.removeAttribute('属性');

案例：比如不想要index了 移除index属性

<body>
    <div id="demo" index="1" class="box"></div>

    <script>
        var div = document.querySelector('div');
        //移除属性
        div.removeAttribute('index')
    </script>

</body>

# javascript # 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB数据库高可用部署方案

avatar 华为开发者空间
cover

在华为开发者空间，简单几步带你实现AI风格化编程

avatar 华为开发者空间
cover

GaussDB技术解读——GaussDB架构介绍（四）

avatar 华为开发者空间