javascript - 数据集属性 - 获取/设置正确的驼峰命名法

Question

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

我目前找到的最短路径是下面的更新。但这对我来说有点hacky。我的任务是否有更好的解决方案/更短的方法？

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" />

如果您必须使用驼峰命名法，您可以在您创建的元素上使用数据集；

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