修改伪选择：在javascript中[重复]答案

【问题标题】：modify pseudo select :after in javascript [duplicate]修改伪选择：在javascript中[重复]
【发布时间】：2015-05-29 09:31:57
【问题描述】：

我已经定义了一个类似的css

.slidingTag li:after {
  content: '';
  z-index: 3;
  height: 6px;
}

我想从 JS 动态更改高度属性。我可以使用

window.getComputedStyle(document.querySelector('.slidingTag'), 'li:after').getPropertyValue('height')

但我不知道如何更改高度属性。我尝试使用setProperty，但似乎没有可用于伪类的此类功能。任何想法让我知道。

【问题讨论】：

伪元素不在 DOM 中，因此无法使用 Javascript 选择。 -
啊...好吧，也许然后 - stackoverflow.com/questions/9666527/…
@torazaburo 好吧.. OP 说他们想“改变高度”，因此暗示他们需要选择伪元素——这是不可能的。
与任何其他 CSS 规则一样，您可以使用 CSS API 进行更改。
嗨@torazaburo，你有什么例子吗？谢谢

标签： javascript css css-selectors

【解决方案1】：

如果该样式来自 CSS 文件，则必须在 document.styleSheets 中搜索它，这会很乱。

如果您愿意动态创建包含该 CSS 的 <style> 元素，则可以通过编程方式对其进行修改。

var slidingTagLiAfterStyle = document.createElement("style");
slidingTagLiAfterStyle.innerHTML =
 ".slidingTag li:after {
    content: '';
    z-index: 3;
    height: 6px;
  }";
document.head.appendChild(slidingTagLiAfterStyle);

...

slidingTagLiAfterStyle.innerHTML = slidingTagLiAfterStyle.innerHTML.replace(/height: [0-9]+px/, "height: 12px"); // or whatever you want to set it to

【讨论】：

谢谢，它有效！太好了！

【解决方案2】：

:before 和 :after 等伪元素由 CSS 而非 DOM 处理。因此，您需要采取不同的方法。

你可以做的是找到负责这个伪元素的 CSS 规则，然后改变它。你可以使用 CSSOM，这是一个完全不同的 API，即使您首先从 DOM 访问它。

与 DOM 不同，CSS 规则没有可以干净快速地搜索的 id 或类名，因此我们必须搜索样式表和样式规则列表。 这可能很昂贵，所以如果只能搜索一次，我强烈建议这样做。这是一种快速而肮脏的方法：

function getRuleWithSelector(selector) {
  var numSheets = document.styleSheets.length,
    numRules,
    sheetIndex,
    ruleIndex;
  // Search through the style sheets.
  for (sheetIndex = 0; sheetIndex < numSheets; sheetIndex += 1) {
    numRules = document.styleSheets[sheetIndex].cssRules.length;
    for (ruleIndex = 0; ruleIndex < numRules; ruleIndex += 1) {
      if (document.styleSheets[sheetIndex].cssRules[ruleIndex].selectorText === selector) {
        return document.styleSheets[sheetIndex].cssRules[ruleIndex];
      }
    }
  }
  // If we get this far, then the rule doesn't exist.
  // So the return value is undefined.
}

var afterSlidingTagRule = getRuleWithSelector('.slidingTag li::after');
console.debug(afterSlidingTagRule);
window.addEventListener('DOMContentLoaded', function() {
  afterSlidingTagRule.style.fontSize = "10px";
}, false);

.slidingTag {
  color: blue;
}
.slidingTag li {
  color: green;
}
.slidingTag li:after {
  content: "World";
  font-size: 32px;
}

<ul class="slidingTag">
  <li class="selected">Hello</li>
  <li>World</li>
</ul>

一旦你得到了你需要的规则，剩下的就与使用 getComputedStyle() 或使用 DOM 元素的 style 属性非常相似。上面的 sn-p 在 DOMContentLoaded 事件处理程序中执行此操作，但您应该能够在加载内容后随时执行此操作。

使用这种方法需要考虑一些注意事项：

当您更改 CSS 规则时，该更改会反映在该规则选择的每个元素中。如果您的规则会影响许多元素，并且您需要更改所有这些元素的外观，那么这是伟大的。如果您有一个影响许多元素的规则，但您只需要更改其中一个元素的外观，那么这不是很好。
CSSOM 对您的选择器文本的看法可能与您所写的内容不符。事实上，这在这个例子中就出现了，因为你的选择器应该是.slidingTag li::after（注意额外的冒号）。浏览器在解析您的 CSS 时会更正此问题，这就是 CSSOM 知道要查找的内容。
规则说明并不意味着元素会以这种方式显示。任何可以覆盖 CSS 规则（特定于元素的样式、集合中其他地方的更具体规则、!important 声明等）的任何内容也可以覆盖您的更改。
这不能替代getComputedStyle()。从上面得出的结论是：如果某些东西改变了元素的表示，那不会影响底层的 CSS 规则。如果有的话，它与getComputedStyle() 正好相反：它不是获取元素当前显示的内容，而是设置某些元素应该显示（除非出现不可预见的情况）。

【讨论】：

【解决方案3】：

您可以为在 :after 上具有不同属性的元素添加一个额外的类，例如：

首先你有这个：

HTML：

<div class="slidingTag">
    <li>lorem ipsum</li>
</div>

CSS：

.slidingTag li:after {
      content: '';
      z-index: 3;
      height: 6px;
    }

那么你得到了这个：

将覆盖属性 height 的新类：

.slidingTag-modifier li:after {
   content: '';
  z-index: 3;
  height: 10px !important;
}

最终的 HTML：

<div class="slidingTag slidingTag-modifier">
    <li>lorem ipsum</li>
</div>

使用 javascript 做到这一点：

var element = document.querySelector('.slidingTag');
//use this instruction wherever you want to add the new class that will override the property
element.classList.add('slidingTag-modifier'); 
//works only on recent browsers

干杯！

【讨论】：