如何在JavaScript条件语句中展示data-attribute值？

你可以通过条件判断语句（if...else或三元运算符）来控制文本展示逻辑：先检查获取到的data属性值是否存在且有效，存在则显示该值，否则显示默认文本。

方法一：使用getAttribute结合if...else #

<h2 id="text" data-text="A Data Text Message"></h2>

<script type="text/javascript">
// 先获取目标元素，避免重复DOM查询
const textElement = document.getElementById("text");
// 获取data-text属性的值
const message = textElement.getAttribute("data-text");

// 条件判断：仅当属性存在且值非空（排除空白字符）时使用该值
if (message && message.trim() !== "") {
  textElement.innerHTML = message;
} else {
  textElement.innerHTML = "A Default Text Message";
}
</script>

方法二：使用dataset简化属性获取（推荐） #

HTML5的dataset API可以更直观地访问data属性，写法更简洁：

<h2 id="text" data-text="A Data Text Message"></h2>

<script type="text/javascript">
const textElement = document.getElementById("text");
// 通过dataset直接获取data-text（自动转换为驼峰命名：text对应data-text）
const message = textElement.dataset.text;

// 用三元运算符简化条件逻辑
textElement.innerHTML = (message && message.trim() !== "") ? message : "A Default Text Message";
</script>

关键说明 #

• 加入trim()是为了过滤属性值为空白字符的情况（比如data-text=" "），这种场景下仍展示默认文本更合理
• 如果你的data属性是多段命名（比如data-user-name），dataset会自动转换为驼峰式：textElement.dataset.userName，比getAttribute("data-user-name")更易读

内容的提问来源于stack exchange，提问作者Asma Binta Younus