WordPress网站JS检测页面语言后if语句不生效问题求助

1. 检查lang属性的实际值 #

控制台打印的language可能不是纯tr，而是带区域后缀的格式（比如tr-TR），直接用== 'tr'会匹配失败。可以改成匹配前缀：

var language = document.documentElement.getAttribute("lang");
console.log(language);

// 匹配以tr开头的语言代码
if (language.startsWith('tr')) {
    const targetElement = document.getElementsByClassName("size-botiga-large")[0];
    if (targetElement) {
        targetElement.style.display = "none";
    }
}

2. 确保DOM完全加载后执行代码 #

如果代码放在<head>里，或者页面元素还没渲染完成就执行，会导致两种问题：

• html的lang属性可能还未被设置
• size-botiga-large元素还不存在，调用[0]会报错中断执行

解决办法：把代码放在DOMContentLoaded事件监听里，或者放在页面底部</body>标签前：

document.addEventListener('DOMContentLoaded', function() {
    var language = document.documentElement.getAttribute("lang");
    console.log(language);

    if (language.startsWith('tr')) {
        const targetElement = document.querySelector(".size-botiga-large");
        if (targetElement) {
            targetElement.style.display = "none";
        }
    }
});

3. 验证目标元素是否存在 #

在控制台执行document.getElementsByClassName("size-botiga-large")[0]，确认是否能返回有效元素：

• 如果返回undefined，说明类名拼写错误，或者元素是动态生成的（比如通过WordPress插件/主题JS加载）
• 动态生成的元素需要用MutationObserver监听，或者在元素加载完成后再执行代码

额外优化建议 #

• 用document.documentElement代替document.getElementsByTagName("html")[0]，更简洁高效
• 用querySelector代替getElementsByClassName，返回单个元素更直观，且支持更复杂的选择器
• 增加元素存在性判断，避免因元素不存在导致的控制台报错

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