zoukankan      html  css  js  c++  java
  • H5对自定义属性的规定和添加获取自定义属性的方法

    H5对自定义属性的规定和添加获取自定义属性的方法

    元素属性那么多,如何区分是自带的属性还是默认的属性呢?
    H5规定自带的属性有个data- 前缀,如data-index="1",那么,如何设置和获取属性值呢,请看下文。
        <script>
            var divele = document.querySelector("div");
            //我们常用的添加和获取自定义属性
            divele.setAttribute("flag", 1);
            console.log(divele.getAttribute("flag"));
    
            //属性那么多,如何区分是自带的属性还是默认的属性呢?
            //H5规定自带的属性有个data- 前缀,如data-index="1"
            divele.setAttribute("data-index", 1);
            console.log(divele.getAttribute("data-index")); //兼容性比较好
            //H5新增的获取属性值得方法,元素对象.dataset.index, dataset是个自定义属性(规范的data-开头)的集合
            console.log(divele.dataset.index);
            //divele.dataset[`index`]   获取对象属性的第二种方式
            console.log(divele.dataset[`index`]);
    
            //问题来了,如果自定义属性被很多连接符拼接而成呢?
            divele.setAttribute("data-temp-name", 2);
            //获取的时候用驼峰法
            console.log(divele.getAttribute("data-temp-name")); //这种方式正常写
            console.log(divele.dataset.tempName);
            console.log(divele.dataset[`tempName`]);
        </script>
  • 相关阅读:
    redis使用watch完成秒杀抢购功能:
    OAUTH协议
    常用mysql命令大全
    版本控制器 (Svn,Git)
    vue axios上传文件实例
    vue-resource 和 axios的区别
    js递归算法1+ 2+3.....100的和
    vue-cli title 里面怎动态显示文字
    Entity Framework With Mysql 之Code First
    关于a标签下的img元素在IE7下不能点击的问题
  • 原文地址:https://www.cnblogs.com/chq1234/p/11402334.html
Copyright © 2011-2022 走看看