三种获取元素属性的方法以及区别

最新推荐文章于 2022-11-15 13:59:22 发布

黄大仙No.1

最新推荐文章于 2022-11-15 13:59:22 发布

阅读量735

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107813091

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

自定义属性通常用data-开头
以data-开头的自定义属性可以通过element.dataset.index或element.dataset['index']的 方式获取,此时去掉data-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo" aynu="aynu" data-list="123" data-list-name="dln"></div>
<script>
    var div=document.getElementById('demo');
    console.log(div.id);
    console.log(div.getAttribute('id'));
    console.log(div.getAttribute('aynu'));
    div.setAttribute('aynu','ultraman');    //设置自定义属性的值
    div.setAttribute('class','box');    //设置class的值
    div.removeAttribute('aynu');
    console.log(div.dataset.list);          //以data开头时,可以这样获取,dataset是一个集合
    console.log(div.dataset.listName);      //当有多个'-'时,采用驼峰命名法
</script>
</body>
</html>

在这里插入图片描述可见结果相同
区别:
element.属性只能获取元素本身自带的属性
element.getAttribute(‘属性’) 可以获取程序员自定义的属性
```html
可见执行div.setAttribute('aynu','ultraman'); //设置自定义属性的值 div.setAttribute('class','box'); //设置自定义属性的值后发生改变

在这里插入图片描述
该语句执行后div.removeAttribute('aynu');aynu属性被删除

黄大仙No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种获取元素属性的方法以及区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="demo" aynu="aynu"></div><script> var div=document.getElementById('dem
复制链接

扫一扫