纯TypeScript环境下如何读取含连字符的自定义HTML属性

嘿，我太懂你遇到的这个困扰了！带连字符的自定义HTML属性确实没法直接用TypeScript/JavaScript的点语法访问——毕竟标识符里不能有连字符嘛，直接写会被当成减法运算。不过纯TS环境下咱们有两个简单靠谱的解决办法：

• 使用getAttribute()方法（最推荐）
  这是DOM元素原生支持的方法，不管属性名是什么格式都能轻松读取，TypeScript完全兼容，不用做任何类型 hack。示例代码如下：

  // 先获取目标元素，这里用类型断言确保是HTMLElement类型
  const targetSpan = document.querySelector('span[visible-language]') as HTMLElement;
  // 直接传入带连字符的属性名即可
  const languageValue = targetSpan.getAttribute('visible-language');
  console.log(languageValue); // 输出 "en"
  

• 通过attributes集合访问
  如果你需要操作属性对象本身（比如检查属性是否存在、修改属性值等），可以用元素的attributes集合配合getNamedItem()方法：

  const targetSpan = document.querySelector('span') as HTMLElement;
  const langAttribute = targetSpan.attributes.getNamedItem('visible-language');
  // 记得先判断属性是否存在，避免空值报错
  if (langAttribute) {
    console.log(langAttribute.value); // 输出 "en"
  }
  

顺带提一句：如果你的自定义属性是data-开头的（比如data-visible-language），那还可以用元素的dataset属性，比如targetSpan.dataset.visibleLanguage——不过你的场景里属性不是data-前缀，所以上面两个方法更适用。

备注：内容来源于stack exchange，提问作者Julius Babies