了解HTML5数据属性

Question

我对javascript/jQuery相当新,但是我正在努力去理解我在做什么.柴油的网站给了我灵感.在此站点上,数据属性用于主页上的文本块.data-color.我想在我的网站上实现这个功能.能够在每个条目中更改每个块的颜色,当用户向下滚动页面时,它会以不同的方式触发.

我来这里寻求帮助,因为我没有看到任何关于我想要实现的功能的教程.有谁知道如何做到这一点？我相信这对那些想要执行相同或类似功能的人会有所帮助.

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 + ')';
},

Answer 1

HTML5数据属性仅用于在html元素中存储附加信息.我在程序化打印各种数据集时使用它,以包含用户帐号等信息.您可能想要使用javascript或jquery访问的数据位

您可以在这里看到webtutsplus对HTML5数据属性的精彩文档/教程

数据属性很有趣,因为您可以将其定义为您喜欢的任何内容:

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

更新版本的jQuery还有一个内置的易于使用的功能,专门处理获取和设置HTML5数据属性 - 这里的文档

想象一下假设的html:

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

在我们的磁通电容jquery元素上调用.data处理程序将返回"1.21"

     $('#fluxCapacitor').data('gigawats'); // "1.21"

您可以使用两个参数功能将磁通电容设置为超过9000 gigawats.

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

导致:

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

编辑:调整我的功率水平以获得历史准确性.