引用不存在的HTML data属性时JS的行为及按钮文本切换疑问

嘿，针对你提到的两个问题，我来给你详细拆解一下：

一、引用不存在的HTML data属性时，JavaScript的行为 #

JavaScript访问data属性主要有两种常用方式，它们对不存在的属性行为不同：

• 使用dataset API：当你通过element.dataset.xxx（注意这里是驼峰命名，对应HTML里的短横线命名，比如data-text-original对应dataset.textOriginal）访问不存在的属性时，会返回undefined。举个例子：

<button id="myBtn">Read more</button>
<script>
  const btn = document.getElementById('myBtn');
  console.log(btn.dataset.textOriginal); // 输出：undefined
</script>

• 使用getAttribute()方法：如果直接用element.getAttribute('data-text-original')访问不存在的属性，会返回null。比如：

console.log(btn.getAttribute('data-text-original')); // 输出：null

这两种差异需要注意，在判断属性是否存在时要对应使用合适的判断逻辑（比如判断undefined或者null）。

二、用data属性实现按钮文本切换的最优方案 #

用HTML data属性来维护按钮的文本状态是一种语义化且简洁的方案，很适合实现“Read more/Read less”这类切换需求。这里给你推荐两种清晰的实现思路：

思路1：用单个data属性存储切换目标文本 #

把切换后的文本存在data-text-alt里，点击时交换当前文本与data属性值，同时更新data属性以便下次切换：

<button id="toggleBtn" data-text-alt="Read less">Read more</button>
<script>
  const toggleBtn = document.getElementById('toggleBtn');
  
  toggleBtn.addEventListener('click', function() {
    const currentText = this.textContent.trim();
    const altText = this.dataset.textAlt;
    
    // 交换文本内容
    this.textContent = altText;
    // 更新data属性，为下一次切换做准备
    this.dataset.textAlt = currentText;
  });
</script>

思路2：用data属性存储原始文本 #

把初始文本存在data-text-original里，点击时判断当前文本是否等于原始文本，来决定切换方向：

<button id="toggleBtn" data-text-original="Read more">Read more</button>
<script>
  const toggleBtn = document.getElementById('toggleBtn');
  
  toggleBtn.addEventListener('click', function() {
    const originalText = this.dataset.textOriginal;
    this.textContent = this.textContent.trim() === originalText 
      ? "Read less" 
      : originalText;
  });
</script>

这两种方案都不需要额外的全局变量来维护状态，直接借助元素自身的data属性管理，代码简洁易维护，属于这类需求的最优实现方向之一。

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