修改伪选择:在javascript之后

前端之家收集整理的这篇文章主要介绍了修改伪选择:在javascript之后前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经定义了一个类似的CSS
.slidingTag li:after {
  content: '';
  z-index: 3;
  height: 6px;
}

我想从JS动态更改height属性.我可以使用该物业

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

但我不知道如何更改height属性.我试图使用setProperty,但似乎没有这样的函数可用于伪类.任何想法让我知道.

解决方法

如果该样式来自CSS文件,则必须在 document.styleSheets搜索它,这将是混乱的.

如果您愿意动态创建< style>相反,包含该CSS的元素,您可以以编程方式修改它.

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

猜你在找的JavaScript相关文章