querySelectorAll - 我可以使用“：after”放置一个选择器吗？

Question

我可以在JavaScript中执行此操作吗？

var Dim_Back = document.querySelectorAll(".s1:after");
for (var i = 0; i < Dim_Back.length; i++) {
                Dim_Back[i].style.backgroundImage = "url(" + imgSrc + ")";
            }

.view .s1:after {
                position: absolute;
                bottom: 0;
                top: 0;
                right: 0;
                left: 0;
                content: '';
                display: block;
                opacity: 0;
                transition-delay: 0.3s;
            }

            .view:hover .s1:after {
                opacity: 1;
                transition-delay: 0.7s;
            }

我也从我的CSS代码中添加了一部分。

我想知道我是否可以在querySelectorAll中放入“：after”。它会维持s1属性吗？

Answer 1

您无法在Javascript中操纵:after，但您可以使用Access the css ":after" selector with jQuery等类切换进行操作。

修改 你能解释一下上下文吗？ 否则，这不是关于jQuery，而是关于方法：

JS

var Dim_Back = document.querySelectorAll(".s1"),
    Dim_class = 'activeBg',
    el;

for (var i = 0; i < Dim_Back.length; i++) {
    el = Dim_Back[i];
    if (el.classList){
       el.classList.add(Dim_class);
    } else {
       el.className += ' ' + Dim_class;
    }
}

CSS

.view .s1:after {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    content: '';
    display: block;
    opacity: 0;
    transition-delay: 0.3s;
}
.view .s1.activeBg:after {
    background: URL('/your_image.png');
}
.view:hover .s1:after {
    opacity: 1;
    transition-delay: 0.7s;
}

我不知道它是否真的准确，但它是为了发展我的观点。希望它可能有所帮助。

祝你好运＆＃39;

Answer 2

好吧，如果您使用的是（相对）现代的浏览器，那么-是的，您可以的！

const myElement = document.querySelector('your-element-selector')
const myPseudoElement = window.getComputedStyle(myElement, ':after')

然后可以使用getPropertyValue来检索CSS值。例如：

const originalBackgroundValue = myPseudoElement.getPropertyValue('background-color')

您可以详细了解here

如果您还希望更新值，请使用此answer