javascript - 理解 HTML5 数据属性

Question

我是 javascript/jQuery 的新手，但我正在尽一切努力了解我在做什么。我的灵感来自 diesel's site .在 this site ，数据属性用于主页上的文本 block 。 数据颜色。我想在my site上实现这个功能.能够更改每个条目的每个 block 的颜色，当用户向下滚动页面时，它会以不同方式触发。

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

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 访问的数据位

您可以看到 great documentation/tutorial here on the HTML5 data attribute by webtutsplus

data-attribute 很有趣，因为你可以定义任何你喜欢的东西:

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

较新版本的 jQuery 也有一个易于使用的内置函数来专门处理 getting and setting HTML5 data-attributes - documentation here

想象一些假设的 html:

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

在我们的通量电容器 jquery 元素上调用 .data 处理程序将返回“1.21”

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

并且您可以使用两个参数功能将通量电容器设置为超过 9000 吉瓦。

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

导致:

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

---

编辑:根据历史准确性调整了我的功率水平。