数据集属性 - 获取/设置正确的骆驼案例名称答案

【问题标题】：dataset attributes - get/set correct camel case name数据集属性 - 获取/设置正确的骆驼案例名称
【发布时间】：2018-07-03 15:25:28
【问题描述】：

我将属性名称存储在字符串中的某处，并且需要一种方法来创建更正的名称以与dataset api 一起使用。我得到了那些属性样式的名字，比如data-attrib-name。所以我需要将它们转换为驼峰格并删除它前面的data-。

我现在发现的最短方法是下面的替换。但这对我来说有点hacky。我的任务有更好的解决方案/更短的方法吗？

console.log(
  "data-my-test-name"
    .replace('data-', '')
    .replace(/-([a-z]?)/g, (m, g) => g.toUpperCase())
);

【问题讨论】：

element.dataset.myTestName = "test" 看来这是datasetproperty 内置的，为什么需要这样做？。
您是在获取属性名称并尝试设置它们还是它们已经设置并且您正在尝试获取值？
我将名称作为字符串并尝试将它们设置为元素。 @卢卡
element.setAttribute("data-my-test-name", "thevalue") console.log(element.dataset.myTestName) === thevalue..

标签： javascript html custom-data-attribute

【解决方案1】：

您可以直接将setAttribute与属性一起使用，而无需使用dataset

var attr = "data-attrib-name";
document.getElementById("f1").setAttribute(attr, "changed");

各种方法：

console.log(document.getElementById("f1").dataset);
var attr = "data-attrib-name";

document.getElementById("f1").setAttribute(attr, "changed"); // set the attribute

console.log(document.getElementById("f1").dataset);

var datasetByAttr = document.querySelector("[" + attr + "]").dataset;
console.log(datasetByAttr);

&lt;input type="text" id="f1" data-set-name="set" data-attrib-name="attr" /&gt;

如果您必须使用 camelCase，您可以在您创建的元素上使用 dataset；

var attr = "data-attrib-name",
    test = document.createElement("span");

test.setAttribute(attr, 1)
var camelCase = Object.keys(test.dataset)[0];
test = null;
console.log(camelCase);

【讨论】：

@eisbehr 只需使用setAttribute 即可。
ps.. 你的被接受我很好，归根结底这不是一场比赛.. :) 很乐意提供帮助，...
谢谢你们！ ;)

【解决方案2】：

这是一个通过属性和数据集设置和获取的示例。

const sets = [
  {name: "data-my-test", value: "value 1"},
  {name: "data-another-test", value: "value 2"}
];


const d = document.querySelector("div");

sets.forEach(i => d.setAttribute(i.name, i.value));

console.log(d.dataset);

<div>
  look at my data attributes, via inpector.
</div>

【讨论】：

非常感谢，这是一个很好的提示！