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

现有需求:

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
            })
        })

功能展示