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

Question

我将属性名称存储在字符串中的某个位置，并且需要一种方法来创建更正的名称以与datasetapi 一起使用。我以属性样式获取那些名称，例如data-attrib-name.所以我需要将它们转换为骆驼盒并移除它前面的data-。

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

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

Answer 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);

<input type="text" id="f1" data-set-name="set" data-attrib-name="attr" />

如果必须使用 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);

Answer 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>