H5新特性之data-*使用

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 

data-* 添加自定义属性

data-*即data-前缀加上自定义的属性名

HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或提供语义信息。

优点：多一种传值方式，使用更灵活

我的应用场景：

项目中统计分析模块采用echart图标实现了一些数据分析功能，比如一个页面有六个饼图或柱状图，但是客户不知道每个图表的统计规则是什么（在标题里不能完全展示出来），希望鼠标点到图表上有个提示，这里实现就是在图表title的位置加了一个tip属性，显示当前图的注解说明

html代码实现如下：

<img src="../images/info.png" 
id="mytip" 
class="title-tip" 
data-tip="这里是图表的提示信息，计算规则为：">

js文件增加一个鼠标划过绑定事件，也用到了layer插件的弹出层在这里插入代码片

$(function() {
    // 引入layer
    layui.use('layer');
    var tips;
    // 给info图标绑定鼠标进入和移出事件
    const bindEvent = {
        mouseenter: function () {
            // console.log('mouseenter', this.dataset.tip)
            const w = $(this).parent().width() - 50
            tips = layer.tips(this.dataset.tip, this, { tips: [2, '#2b2b2b'], time: 0, area: Math.min(w, 300) + 'px' });
        },
        mouseout: function () {
            layer.close(tips);
        }
    }
    $('img.title-tip').on(bindEvent)
})

这样就实现了开头场景提到的效果，但是数据怎么动态赋值呢？方法很多，我这里试了一下dataset属性获取不到，直接修改attr属性值是可以的。

let menuTips = '我是动态获取的提示信息'
$('#'+chartID).attr('data-tip', menuChartRule)