JavaScript中HTML元素属性字符串转布尔值及切换问题

JavaScript中任何非空字符串调用Boolean()都会返回true，所以Boolean("false")得到true是正常行为，这就是你遇到问题的原因。下面提供几种可行的解决方案：

方案1：手动转换字符串为布尔值再切换 #

先将data-isAdmin的字符串值转为对应的布尔值，取反后再转回字符串设置回属性：

<div id="is-admin" data-isAdmin="false" onclick="toggleIsAdmin();">
    NOT Admin
</div>

<script>
function toggleIsAdmin() {
    const element = document.getElementById('is-admin');
    // 把字符串"true"/"false"转为布尔值
    const isAdmin = element.getAttribute('data-isAdmin') === 'true';
    // 取反后转回字符串
    const newStatus = !isAdmin;
    element.setAttribute('data-isAdmin', newStatus.toString());
    // 同步更新显示文本
    element.textContent = newStatus ? 'Admin' : 'NOT Admin';
}
</script>

方案2：使用HTML5 dataset属性简化操作 #

通过元素的dataset属性直接访问data-*属性，写法更简洁：

<div id="is-admin" data-isAdmin="false" onclick="toggleIsAdmin();">
    NOT Admin
</div>

<script>
function toggleIsAdmin() {
    const element = document.getElementById('is-admin');
    // dataset会自动处理data-*属性，这里对应data-isAdmin的属性名是isAdmin
    const currentStatus = element.dataset.isAdmin;
    // 直接切换字符串值
    element.dataset.isAdmin = currentStatus === 'true' ? 'false' : 'true';
    // 更新显示文本
    element.textContent = element.dataset.isAdmin === 'true' ? 'Admin' : 'NOT Admin';
}
</script>

方案3：直接切换字符串值（无需转布尔） #

如果不需要在代码中使用布尔值，直接判断当前字符串并切换是最直接的方式：

<div id="is-admin" data-isAdmin="false" onclick="toggleIsAdmin();">
    NOT Admin
</div>

<script>
function toggleIsAdmin() {
    const element = document.getElementById('is-admin');
    const current = element.getAttribute('data-isAdmin');
    // 直接设置相反的字符串值
    element.setAttribute('data-isAdmin', current === 'true' ? 'false' : 'true');
    // 同步更新显示文本
    element.textContent = current === 'true' ? 'NOT Admin' : 'Admin';
}
</script>

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