HTML5---14.自定义标签

最新推荐文章于 2022-11-16 22:59:50 发布

weixin_30493321

最新推荐文章于 2022-11-16 22:59:50 发布

阅读量141

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Tobenew/p/10506278.html

版权

定义
data- 开头
data- 后必须至少有一个字符
建议:
1.名称应该都使用小写--不要任何的大写字符
2.名称中不要有任何的特殊符号
3.名称不要副作用纯函数

<script src="https://code.jquery.com/jquery-3.3.1.js"integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="crossorigin="anonymous"></script>
<body>
    <p data-school-name="To">我是Tobenew</p>      
</body>
<script>
     window.onload=function(){
         var p=document.querySelector("p");
         //获取自定义属性值
         //将data后面的单词使用驼峰(camel)命名法连接,不然有可能无法获取到值

         //第一种:html5中新增的获取自定义属性值的用法
         console.log(p.dataset);//输出的是一个对象
         console.log(p.dataset["schoolName"]);//输出的是自定义属性值
         console.log(p.dataset.schoolName);
        //第二种:jQuery中获取自定义属性值的写法
        console.log($("p").attr("data-school-name"));
        //第三种:原生dom获取自定义属性值的写法
        console.log(p.getAttribute("data-school-name"));
        
     }
</script>

以下为浏览器输出结果: