H5自定义属性

作者: 追逐_chase | 来源:发表于2018-07-27 10:25 被阅读0次

自定义属性操作
H5自定义属性及兼容处理
data-*自定义属性
37.要点
`data-`属性的作用是什么？
给标签自定义属性html
h5和css3自定义单选按钮
Angular 1.x 精华一页纸
H5自定义属性
Android相关知识点博客记录

自定义属性

1.自定义属性 data-开头后面跟上属性名称
1. data-user =>user data-user-age =>userAge 浏览器会自动解析
3.要遵循驼峰命名
1. element.dataset获取自定义属性的集合
5.设置属性 element.setAttribute("data-age","15");
6.获取属性 element.getAttribute("data-age")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义属性</title>
</head>
<body>

<ul id="list"></ul>



</body>
</html>

<script type="text/javascript">
    //获取到
    var list = document.getElementById("list");
    //创建数据
    var data = {"01":{
            name:"CC",
            age:18
        },
        "02":{
            name:"CC1",
            age:15
        },
        "03":{
            name:"CC2",
            age:15
        }

    }

    for (var key in data){
        //json数据
        var item = data[key];
        //创建li标签
        var li = document.createElement("li");
        //给li设置
        li.innerHTML = item.name;
        //设置属性
        li.setAttribute("data-age",item.age);
        //添加
        list.appendChild(li);
        //添加事件
        li.addEventListener("click",function () {
            console.log(this.dataset);
            console.log(this.getAttribute("data-age"));
        })

    }
</script>

dataset属性集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义属性</title>
    <style>
        .cla {
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>

<div class="cla" data-user = "CC" data-user-age = "18"></div>


<!--<div data-user="wl" data-user-age="18"></div>-->
</body>
</html>

<script type="text/javascript">

    var div = document.querySelector("div");

    var attar = div.dataset;
    //获取单个属性
    console.log(attar.user);
    //设置属性值
    attar.user = "哈哈哈";
    console.log(attar.user);



</script>