js 属性操作获取设置移除 h5自定义属性

最新推荐文章于 2024-04-11 22:06:30 发布

tianmeng1999

最新推荐文章于 2024-04-11 22:06:30 发布

阅读量411

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42448623/article/details/106169765

版权

JavaScript 专栏收录该内容

184 篇文章 6 订阅

订阅专栏

获取属性值

ele.属性名

获取内置属性

ele.getAttribute(“属性名”)

获取内置属性和自定义的属性

代码

<!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="ids" index="1"></div>

    <script>
        var div = document.querySelector("div")
        console.log(div.id) //ids
        console.log(div.index) //
        console.log(div.getAttribute('id')) //ids
        console.log(div.getAttribute('index')) //1
    </script>
</body>
</html>

设置属性值 setAttribute

ele.setAttribute("calss","footer")

移除属性 removeAttribute

ele.removeAttribute("class")

获取h5自定义属性

兼容性获取 getAttribute
h5 新增 ele.dataset.index 或 ele.dataset[‘index’] IE11以上

dataset是一个集合里面存储了所有以 data- 开头的属性
如果自定义属性里面有多个 -链接的单词获取时用驼峰命名法

<div id="ids" data-index="8" data-xx-index="5" ></div>

var div = document.querySelector("div")
console.log(div.getAttribute("data-index")) // 8
console.log(div.dataset.index) // 8
console.log(div.dataset.xxIndex) // 5
console.log(div.dataset['xxIndex']) // 5

tianmeng1999

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 属性操作获取设置移除 h5自定义属性

ele.属性名获取内置属性ele.getAttribute(“属性名”)获取内置属性和自定义的属性代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&
复制链接

扫一扫