如何用纯JavaScript创建jscolor按钮？解决data-jscolor设置报错

嘿，我一眼就看出你代码里的问题啦！你直接写btn.data-jscolor会触发语法错误，原因很简单：JavaScript里的点语法不支持带连字符的属性名——解析器会把data-jscolor里的-当成减号，把这行代码误判成减法运算，自然就报Uncaught SyntaxError: Invalid left-hand side in assignment了。

针对动态创建元素并设置data-jscolor属性，有两种靠谱的解决方法，还得记得手动初始化jscolor（因为动态元素不会被自动扫描）：

方法一：用setAttribute直接设置data属性 #

这是最直接的方式，完全还原你原来HTML里的属性写法：

function createJscolorButton() {
  var btnDiv = document.getElementById("div_button_jscolor");
  var btn = document.createElement("button");
  btn.id = "jscolor_created_js";
  // 用setAttribute设置完整的data-jscolor属性
  btn.setAttribute('data-jscolor', '{closeButton:true, closeText:"Change", preset:"large dark", value:"#00CC66"}');
  btnDiv.appendChild(btn);
  // 关键：动态创建的元素需要手动初始化jscolor
  new jscolor(btn);
}
createJscolorButton();

方法二：用dataset对象（更符合JS规范） #

HTML的data-*属性在JS里可以通过元素的dataset对象访问，规则是去掉data-前缀，把连字符后面的首字母大写（不过这里data-jscolor没有连字符，直接用dataset.jscolor就行）：

function createJscolorButton() {
  var btnDiv = document.getElementById("div_button_jscolor");
  var btn = document.createElement("button");
  btn.id = "jscolor_created_js";
  // 用dataset设置属性值
  btn.dataset.jscolor = '{closeButton:true, closeText:"Change", preset:"large dark", value:"#00CC66"}';
  btnDiv.appendChild(btn);
  // 同样要手动初始化jscolor
  new jscolor(btn);
}
createJscolorButton();

额外提醒 #

新版本jscolor依赖data-jscolor属性识别元素，但它只会在页面初始加载时自动扫描一次DOM。你动态创建的按钮不在初始DOM里，所以必须手动调用new jscolor(btn)来初始化颜色选择器，不然按钮不会有任何交互效果哦～

内容的提问来源于stack exchange，提问作者atp