代码改变世界

HTML data-* 属性

2019-01-10 11:17  马尔代夫_珍  阅读(1474)  评论(0)  编辑  收藏  举报

实例

使用 data-* 属性来嵌入自定义数据：

<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li> 
<li data-animal-type="蜘蛛">蝇虎</li> 
</ul>

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
</head>
<body>

<h1>物种</h1>

<p>点击某个物种来查看其类别：</p>

<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>
</ul>

</body>
</html>

 

http://www.w3school.com.cn/tiy/t.asp?f=html5_global_data

data-* 属性包括两部分：

（1）属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
（2）属性值可以是任意字符串

简单来说就是存储一些简单信息，然后可以通过js拿到这些信息，像你说的data-url和data-href估计就是存储的真正的url和href，可以通过js的element.dataset.url或JQ的data('url')拿到，然后进行相应操作。

https://blog.csdn.net/j_bean/article/details/78457644

js和data-url代替a标签的各种好处

 跳转没用a标签，而是用了div加h5的自定义属性

因为a标签有种种不确定性，比如在各种浏览器的表现形式不统一，而且鼠标hover的时候页面下方会有链接，显得很low。

而div+自定义属性，在js中获取链接，通过$('.new').attr('url')获取地址，然后把链接 window.href,这样做的目的是不暴露地址，有一些地址是隐藏的，在js处理可以有一个保护性，在html里面就直接能看到，还有在js里可以对http和https做处理，更加便利，window.location.protocol，这样按页面头信息，跳转，，还有就是按域名，比如你是测试机器，然后你在html写错了其实灵活性太不好

data属性可以使用dataset拿到，是一个对象

使用dataset操作data 要比使用getAttribute和setAttribute速度稍微慢些，使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的

原文：https://blog.csdn.net/weixin_38026561/article/details/80606518

前端data-url的用法

data-* 相当于数据存储，点加了点击方法，就会读取里面的数据，进行页面跳转

<div class="level02_guide">

                    <ul class="title">
                        <li><span<#if type=='companyNotice'>
                                class="l02_active" </#if>
                                data-url="${webHomeUrl}/article/companyNotice/index"
                                data-type="/article/companyNotice/index">公司公告</span></li>
                        <li><span<#if type=='news'> class="l02_active" </#if>
                                data-url="${webHomeUrl}/article/news/index"
                                data-type="/article/news/index">业界新闻</span></li>
                    </ul>
                    <script type="text/javascript">
                        $(function() {
                            $('.level02_guide>ul>li>span')
                                    .on(
                                            'click',
                                            function() {
                                                var newsurl = $(this).attr(
                                                        "data-url");
                                                var newType = $(this).attr(
                                                        "data-type");
                                                var oldUrl = location.href;
                                                if (oldUrl.toLowerCase()
                                                        .indexOf(newType) < 0) {
                                                    location.href = newsurl;
                                                }
                                            });
                        });
                    </script>

<div>
原文：https://blog.csdn.net/wudiansheng/article/details/80079006