H5新增属性 data- 自定义属性

最新推荐文章于 2023-04-12 21:30:08 发布

原创最新推荐文章于 2023-04-12 21:30:08 发布 · 723 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #html #前端

日常code记录专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用自定义属性实现点击li元素改变背景色的功能。通过HTML结构定义自定义属性，并利用JavaScript获取这些属性值，进而改变对应元素的背景颜色。

现有需求:

1.使用ul li 设置三个盒子

2.三个盒子上面定义自定义属性自定义属性是背景颜色bgc

3.当点击 li的时候,获取当前 li 标签的背景颜色

4.获取到的背景颜色属性设置到当下 li标签的背景颜色

关于自定义属性:

语法:

设置位置: 在开始标签上：<边签名 data-属性名=“属性值></标签名>

· 获取.在js中：dom对象.dataset["属性名"]

修改.在js中 : dom对象.dataset["属性名"]=新属性值

css样式设置

<style>
        *{
            list-style: none;
        }
        ul li{
            width: 100px;
            height: 100px;
            border: 1px solid;
        }
    </style>

html 结构

#在这里 data-属性名="属性值" 就是自定义属性

<ul>
        <li data-bgc="lightblue">
            111
        </li>
        <li data-bgc="gray">
            222
        </li>
        <li data-bgc="pink">
            333
        </li>
    </ul>

js代码部分

 // 获取元素
        let lis=document.querySelectorAll(' ul li')
        // 遍历所获取的li标签
        lis.forEach(function(li,index){
            // 注册点击事件
            li.addEventListener('click',function(){
                // 进行排他 排他就是点击当前 其他内容不会有变化
                for(let i=0;i<lis.length;i++){
                // 首先都给一个空的m
                    lis[i].style.backgroundColor=''   //null也可以
                }
                // 用一个变量来接收获取到的自定义属性的值
                let res = li.dataset['bgc']
                // 利用style属性来修改背景颜色
                li.style.backgroundColor=res
            })
        })