如何在JS/JQ中检测元素是否设置了::after或::before伪元素

嘿，我懂你想在条件判断里检测目标元素的伪元素是否存在，再根据结果调整CSS属性的需求——毕竟伪元素不算真正的DOM节点，没法直接用getElementById这类常规方法获取，确实有点绕。不过咱们有几个实用的办法能搞定这个事儿：

方法1：通过计算样式判断伪元素是否渲染 #

伪元素要能显示出来，要么得有非none的content属性，要么得有实际的宽高（比如用来做纯装饰的伪元素）。我们可以用window.getComputedStyle()获取伪元素的最终计算样式，通过关键属性来判断它是否存在：

function hasPseudoElement(element, pseudoType) {
  // 获取伪元素的计算样式，pseudoType传':before'或':after'
  const pseudoStyle = window.getComputedStyle(element, pseudoType);
  
  // 两个判断条件：content不是none，且宽高中至少有一个大于0
  // 覆盖"content为空但有宽高"和"有content但没尺寸"的情况
  return pseudoStyle.content !== 'none' && 
         (parseInt(pseudoStyle.width) > 0 || parseInt(pseudoStyle.height) > 0);
}

// 实际使用示例
const target = document.querySelector('.your-target-element');
if (hasPseudoElement(target, ':before') || hasPseudoElement(target, ':after')) {
  // 伪元素存在时的操作，比如修改元素的字体颜色
  target.style.color = '#ff4444';
}

这个方法的优势是准确性高，因为getComputedStyle会返回元素最终生效的样式，不管样式是来自外部CSS、内联样式还是动态添加的。

方法2：遍历CSS规则查找伪元素定义 #

如果你提前知道目标元素的伪元素是通过哪些CSS选择器定义的，可以直接遍历文档里的所有样式规则，检查是否存在对应的伪元素规则：

function hasPseudoElementRule(elementSelector, pseudoType) {
  const fullTargetSelector = `${elementSelector}${pseudoType}`;
  
  // 遍历所有样式表
  for (const styleSheet of document.styleSheets) {
    try {
      // 遍历当前样式表的所有规则
      for (const rule of styleSheet.cssRules) {
        // 检查规则的选择器是否包含目标伪元素选择器
        if (rule.selectorText && rule.selectorText.includes(fullTargetSelector)) {
          // 额外确认content不是none，避免空定义的伪元素
          return rule.style.content !== 'none';
        }
      }
    } catch (err) {
      // 跨域的样式表会抛出权限错误，直接跳过即可
      continue;
    }
  }
  return false;
}

// 实际使用示例
if (hasPseudoElementRule('.your-target-element', ':before') || hasPseudoElementRule('.your-target-element', ':after')) {
  // 执行你需要的操作
}

这个方法适合你明确知道伪元素的CSS选择器的场景，但要注意：如果伪元素是通过JavaScript动态插入的样式，或者选择器比较复杂（比如带父级条件的.parent .element:before），可能需要调整选择器的匹配逻辑。

一些额外提醒 #

• 不要忽略content属性：就算你给伪元素设置了宽高，如果content是none，浏览器也不会渲染它，所以检测content !== 'none'是核心判断条件之一。
• 动态场景要重新检测：如果伪元素是通过用户交互或JS动态添加/移除的，记得在样式变化后重新调用检测函数，或者用MutationObserver监听元素的样式变化。

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