如何使用JavaScript移除WordPress中Elementor给所有元素添加的box-sizing属性

要删掉Elementor添加的全局box-sizing规则，直接用CSS覆盖的成本最低，也不会出现页面加载后样式闪烁的问题：

• 打开WordPress后台的「外观」-「自定义」-「额外CSS」
• 插入下面的代码即可覆盖Elementor的规则：

*, *::before, *::after {
  box-sizing: content-box !important;
}

如果你需要恢复默认的box-sizing行为，用上面的代码就可以实现，不需要编写JS。

你没法直接选中*选择器对应的「元素」来修改属性，有两种可行的JS实现思路：

思路1：移除样式表中对应的规则（性能最优，无遍历开销） #

直接找到Elementor插入的样式表，删掉对应的box-sizing规则，完整可运行代码如下：

function remove_box_sizing() {
  // 遍历所有页面样式表
  for (const sheet of document.styleSheets) {
    try {
      // 遍历样式表下的所有规则
      for (let i = 0; i < sheet.cssRules.length; i++) {
        const rule = sheet.cssRules[i];
        // 匹配到*选择器的规则，且包含box-sizing: border-box属性
        if (rule.selectorText === '*, *::before, *::after' && rule.style.boxSizing === 'border-box') {
          // 删除该条规则
          sheet.deleteRule(i);
          i--; // 删除后索引回退，避免漏判后续规则
        }
      }
    } catch (e) {
      // 跨域样式表会抛出权限错误，直接跳过即可
      continue;
    }
  }
}

// 页面DOM加载完成后自动执行
document.addEventListener('DOMContentLoaded', remove_box_sizing);

思路2：给所有元素加内联样式覆盖规则（逻辑简单，适合页面元素少的场景） #

function remove_box_sizing() {
  // 选中页面所有元素
  const allElements = document.querySelectorAll('*');
  allElements.forEach(el => {
    // 给元素设置内联样式覆盖全局规则
    el.style.boxSizing = 'content-box';
  });
}

document.addEventListener('DOMContentLoaded', remove_box_sizing);

• JS实现会存在一定的样式闪烁概率，因为要等DOM加载完成才会执行修改，优先推荐CSS方案
• 如果你只是部分自定义页面不需要这个规则，可以给自定义页面加个专属类名，CSS规则只作用于这个类名下的元素即可，避免影响全站Elementor的正常样式

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