JavaScript中如何获取并输出带连字符的HTML标签属性值？

问题原因 #

你用el.this-client-token报错，核心原因是JavaScript点语法访问对象属性时，属性名不能带连字符。代码会被解析成el.this - client - token，把client和token当成未定义的变量，所以抛出Uncaught ReferenceError: client is not defined。

两种可行解决方法 #

方法1：用标准的属性操作API #

getAttribute()和setAttribute()是操作HTML元素属性的通用方法，不管属性名有没有特殊字符都能正常工作：

// 获取属性值
var el = document.getElementById("mysdk");
var token = el.getAttribute("this-client-token");
console.log(token);

// 修改属性值
el.setAttribute("this-client-token", "你的新token内容");

方法2：用方括号语法访问属性 #

JavaScript允许用方括号包裹字符串形式的属性名，支持带连字符的名称：

// 获取属性值
var el = document.getElementById("mysdk");
var token = el["this-client-token"];
console.log(token);

// 修改属性值
el["this-client-token"] = "你的新token内容";

额外建议：规范自定义属性 #

如果是自己定义的属性，推荐遵循HTML5标准用data-*前缀（比如把this-client-token改成data-client-token），这样可以通过dataset更便捷地访问，还能自动做驼峰命名转换：

<script id="mysdk" src="https://www.myscript.com/sdk/js?currency=EUR" data-client-token="nsiYXV0aG9yaXphdGlvbkZpbmdlcnByaW50IjoiZGUyYjM4N2FiZWV"></script>

// 获取属性值
var token = el.dataset.clientToken;
// 修改属性值
el.dataset.clientToken = "你的新token内容";

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