如何在WordPress页面标题中添加data-value属性

静态HTML实现 #

直接在h1标签中手动添加data-value属性即可，完全符合你期望的代码结构：

<h1 id="h" data-value="HYPERPLEXED">HYPERPLEXED</h1>

后续你可以通过以下两种方式在JS中获取这个属性值，用于自定义功能：

• 使用dataset API：document.getElementById('h').dataset.value
• 使用getAttribute方法：document.getElementById('h').getAttribute('data-value')

动态JS添加（无法直接修改HTML时） #

如果受限于环境不能直接编辑HTML文件，可以通过JS在页面加载后动态设置属性：

document.addEventListener('DOMContentLoaded', () => {
  const targetHeading = document.getElementById('h');
  if (targetHeading) {
    // 方式1：使用dataset API
    targetHeading.dataset.value = 'HYPERPLEXED';
    // 方式2：使用setAttribute
    // targetHeading.setAttribute('data-value', 'HYPERPLEXED');
  }
});

这段代码会在DOM完全加载后，找到id为h的标题元素并为其添加指定的data-value属性，效果和静态写法一致。

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