Javascript 理解HTML5数据属性

我对javascript/jQuery相当陌生，但我正在尽一切努力了解我在做什么。我的灵感来自。在上，数据属性用于主页上的文本块<代码>数据颜色。我想在上实现这个功能。当用户向下滚动页面时，可以更改每个条目的每个块的颜色，它会以不同的方式触发

我来这里寻求帮助，因为我还没有看到任何关于我试图实现的功能的教程。有人知道如何做到这一点吗？我相信这将有助于那些想要执行相同或类似功能的人

getColorMod: function(color, val) {
    var hexToRgb = function(hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : false;
    }
    var array = hexToRgb(color),
    r = parseFloat(array[0] + val),
    g = parseFloat(array[1] + val),
    b = parseFloat(array[2] + val),
    rgb = array ? {
        r: r >= 250 ? 200 : r,
        g: g >= 250 ? 200 : g,
         b: b >= 250 ? 200 : b
    } : false;

    return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
},

使用您选择的库

这似乎就是Diesel执行颜色转换的方式

var $bodyBg = $('<div />'),
$bg = $('<div />').addClass('bg').append($bodyBg),
$arrow = $('<span />').addClass('arrow');

this.$navs.append($bg).append($arrow);

this.$navs
.on('hide', function() {
    // hide navigation bar
    $(this).addClass('hide');
})
.on('show', function() {
    // show navigation bar
    $(this).removeClass('hide');
})
.on('changeColor', $.proxy(function(e, color) {

    var $elm = $(e.currentTarget),
        $bg = $elm.find('.bg div');

    if (Modernizr.csstransforms && Modernizr.csstransitions) {
        // css3 transition
        $bg.css({
            transition: 'background 500ms ease',
            backgroundColor: this.getColorMod(color, 12)
        });
    } else {
        // no css3 transition support
        $bg.css({
            backgroundColor: this.getColorMod(color, 12)
        });
    }

}, this))
.trigger('hide')
.appendTo(this.$el);

var$bodyBg=$（“”），
$bg=$（''）.addClass（'bg'）.append（$bodyBg），
$arrow=$（''）.addClass（'arrow'）；
这是.navs.append（$bg.append（$arrow）；
这是$navs
.on（'hide'，function（））{
//隐藏导航栏
$（this.addClass（'hide'）；
})
.on（'show'，function（）{
//显示导航栏
$（this.removeClass（'hide'）；
})
.on（'changeColor'，$.proxy（函数（e，颜色）{
变量$elm=$（e.currentTarget），
$bg=$elm.find（'.bg div'）；
if（modernizer.cstransforms和modernizer.cstransitions）{
//css3转换
$bg.css({
过渡：“背景500毫秒缓解”，
backgroundColor:this.getColorMod（颜色，12）
});
}否则{
//没有css3转换支持
$bg.css({
backgroundColor:this.getColorMod（颜色，12）
});
}
}，本页）
.trigger（'隐藏'）
.附录（此$el）；

HTML5数据属性仅用于在html元素中存储附加信息。我在以编程方式打印各种数据集以包含用户帐号等信息时使用过它。您可能希望使用javascript或jquery访问的数据位

你可以看到一个

data属性很有趣，因为您可以根据自己的喜好定义一个：

     data-[NAME]="[VALUE]"
     data-color="blue"
     data-price="$19.96"

较新版本的jQuery还内置了一个易于使用的函数来专门处理

想象一下一些假设的html：

     <span id="fluxCapacitor" data-gigawats="1.21"></span>

您可以使用双参数功能将磁通电容器设置为9000千兆瓦以上

     $('#fluxCapacitor').data('gigawats', "over 9000");

导致：

     <span id="fluxCapacitor" data-gigawats="over 9000"></span>

---

---

编辑：根据历史准确性调整了我的功率级别。

我在页面上没有看到任何画布。所有效果通过css3转换完成。使用web调试器（例如内置于Chrome中的webinspector）来查看具体操作。@Tommi我想你误解了我的问题。我稍微编辑了一下。数据属性只是存储信息的一种方式。浏览器不会自动使用它，但您可以从自己的js代码中使用它。您误解了我的问题1，因为您不知道通量电容器只需要1.21千兆瓦，超过9000只适用于外星功率级别。j/k，我修改了这个，这是一个很好的答案。

     $('#fluxCapacitor').data('gigawats', "over 9000");

     <span id="fluxCapacitor" data-gigawats="over 9000"></span>