操作元素之自定义属性（有H5的自定义属性）

最新推荐文章于 2022-10-17 17:31:06 发布

懒得一批s

最新推荐文章于 2022-10-17 17:31:06 发布

阅读量791

点赞数 2

分类专栏： JavaScript 文章标签：自定义属性

本文链接：https://blog.csdn.net/weixin_44797717/article/details/103190858

版权

JavaScript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

自定义属性的操作

1.获取属性值

之前我们学过一个

element.属性

现在再来一个新的

element.getAttribute(‘属性’);

两者的区别

element.属性获取内置属性值(元素本身自带的属性)
element.getAttribute(‘属性’); 主要获得自定义的属性（标准）（ps：我们自己定义的属性）

2.自定义（设置）属性值

自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

element.属性 = ‘值’ 设置内置属性值
div.id = ‘test’;
element.setAttribute(‘要修改的属性’,‘值’)
div…setAttribute(‘class’,‘footer’);
div…setAttribute(‘index’,2);
(index 自定义值)

两者区别
element.属性设置内置属性值
element.setAttribute(‘属性’ ); 主要设置自定义的属性 ( 标准)

3.移除属性

element.removeAttribute(‘属性’);
div.removeAttribute(‘index’)
移除index属性

自定义属性案例
tab栏切换
点击对应的导航栏显示对应的内容

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 800px;
        }
        .zs{
            width: 800px;
            margin: 100px auto;
        }
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color:#f1f1f1;
        }
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
            list-style-type: none;
        }
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        .item_info{
            padding: 20px 0 0 20px ;
        }
        .item {
            display: none;
        }
       
    </style>
</head>
<body>
    <div class="zs">
    <div class='tab' >
        <div class="tab_list">
            <ul >
                <li class="current ">产品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(一亿)</li>
                <li>社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class='item'  style="display: block;">
                这个商品可好啦
            </div>
            <div class='item'>
                规格老棒了包装也好看
            </div>
            <div class='item'>
                终身包换
            </div>
            <div class='item'>
                一亿:啊？
            </div>
            <div class='item'>
                社区正在搭建 敬请期待
            </div>
        </div>
    </div>
</div>
<script>
    var tab_list =document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var item = document.querySelector('.tab_con');
    var items = item.querySelectorAll('.item');
    for (var i=0 ;i<lis.length;i++){
        lis[i].setAttribute('index',i);
        lis[i].onclick = function(){
            for (i=0;i<lis.length;i++){
                lis[i].className='';
                }
            this.className='current' ;
           var index = this.getAttribute('index');
           for (var i=0 ;i<items.length;i++){
            items[i].style.display = 'none'
           }
           items[index].style.display = 'block'
           
        }
    }
</script>
</body>

实现效果

在这里插入图片描述

H5自定义属性

为了防止我们的自定义属性和内置属性
H5它规定了自定义属性要以 data- 开头作为属性名并且赋值

设置H5自定义属性

比如可以使用
<div data-index= ‘1’></div>
或者使用js设置

element.setAttribute('data-index',2)

获取H5自定义属性

第一种还是我们的老办法

element.getArrtribute(‘data-index’);
第二种就是H5新增的
element.dataset.index
或者

element.dataset[ ‘index’]

ie 11才开始支持dataset
dataset是一个集合里面存放了所有以data开头的自定义属性

注意！！！
element.dataset只能获取以data开头的自定义属性

如果自定义属性里面有多个-链接的单词，比如 data-list-name=’Jerry‘；
那么在使用新增方法获取时就需要使用驼峰命名法

element.dataset.listName
//或者
element.dataset.['listName']

好了今天就到这里了觉得写的不错还请点个赞支持一下

懒得一批s

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
操作元素之自定义属性（有H5的自定义属性）

自定义属性的操作1.获取属性值之前我们学过一个element.属性现在再来一个新的element.getAttribute(‘属性’);两者的区别element.属性获取内置属性值(元素本身自带的属性)element.getAttribute(‘属性’); 主要获得自定义的属性（标准）（ps：我们自己定义的属性）2.自定义（设置）属性值自定义属性目的:...
复制链接

扫一扫

专栏目录