JavaScript H5新增自定义属性

最新推荐文章于 2022-08-31 15:42:07 发布

HarryFooty

最新推荐文章于 2022-08-31 15:42:07 发布

阅读量572

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_44500833/article/details/117265235

版权

笔记专栏收录该内容

64 篇文章 1 订阅

订阅专栏

H5自定义属性的目的：为保存并使用数据。

直接在h5中设置一个自定义属性：< div index=“1”>123

js中操作的方法：
通过setAttribute(‘属性名’, 属性值)设置；
通过getAttribute(‘属性’, 属性值)获取；

但是有些自定义属性很容易引起歧义，不容易判断是内置属性还是自定义属性。
H5规定自定义属性 data- 开头作为属性名并且赋值。
比如：< div data-index=“1”>< /div>

使用H5新增方法获取元素：
元素.dataset是一个集合，能够识别以“data-”开头的属性名，把属性名和属性值存起来。
元素.dataset.属性名

<!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>
</head>

<body>
    <div getTime="20" data-index="2" data-list-name="harry">harry</div>
</body>
<script>
    var div = document.querySelector('div');
    //注意不能使用元素.自定义属性
    console.log(div.getAttribute('getTime'));
    div.setAttribute('data-time', 20);
    console.log(div.getAttribute('data-index'));
    //h5新增的获取自定义属性的方法
    //dataset是一个集合里面存放了所有以data开头的自定义属性；
    console.log(div.dataset);
    console.log(div.dataset.index);
    console.log(div.dataset['index']);
    //如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法。
    console.log(div.dataset.listName);
    console.log(div.dataset['listName']);
</script>

</html>

网页中的Tab栏切换案例：

使用到自定义属性
关键：设置’li’的自定义属性为索引，从而将索引传递给’内容页’数组,选出对应的内容页。

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

<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>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    .main {
        width: 60%;
        margin: 1% auto 0;
    }
    
    .tbox {
        border-bottom: 1px solid gray;
        background-color: rgb(231, 231, 231);
    }
    
    .title {
        display: flex;
        width: 60%;
        height: 8vh;
        padding: 0;
    }
    
    li {
        flex: 1;
        display: flex;
        background-color: rgb(231, 231, 231);
        list-style-type: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    li:hover {
        filter: brightness(1.1);
    }
    
    .current {
        color: white;
        background-color: tomato;
    }
</style>

<body>
    <div class="main">
        <div class="tbox">
            <ul class="title">
                <li class="current">tab1</li>
                <li>tab2</li>
                <li>tab3</li>
            </ul>
        </div>
        <div class="content">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
</body>
<script>
    var lis = document.querySelectorAll('li')
    var cts = document.querySelector('.content').querySelectorAll('div')
    for (var i = 1; i < cts.length; i++) {
        cts[i].style.display = 'none'
    }
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute('data-index', i)
        lis[i].onclick = function() {
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = ''
                cts[j].style.display = 'none'
            }
            this.className = 'current'
                // 关键：设置'li'的自定义属性为索引，从而将索引传递给'内容'数组,选出对应的内容页。
            cts[this.getAttribute('data-index')].style.display = 'block'
        }
    }
</script>

</html>

HarryFooty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript H5新增自定义属性

H5自定义属性的目的：为保存并使用数据。直接在h5中设置一个自定义属性：< div index=“1”>123js中操作的方法：通过setAttribute(‘属性名’, 属性值)设置；通过getAttribute(‘属性’, 属性值)获取；但是有些自定义属性很容易引起歧义，不容易判断是内置属性还是自定义属性。H5规定自定义属性 data- 开头作为属性名并且赋值。比如：< div data-index=“1”>< /div>使用H5新增方法获取元素：元
复制链接

扫一扫