querySelectorAll -我可以在"后放置一个选择器吗?

querySelectorAll - Can I put a selector with ":after"?

本文关键字：一个 选择器 我可以 quot querySelectorAll      更新时间：2023-09-26

我可以在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。它会保持s1的属性吗?

好吧，如果你使用的是(相对)现代的浏览器，那么-是的，你可以!

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

您可以使用getPropertyValue检索css值。例如:

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

你可以在这里阅读更多信息

如果您也希望更新值，请使用这个答案

你不能在Javascript中操作:after，但是你可以使用像Access the css ":after"

编辑:

你能再解释一下背景吗?否则，这不是关于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;
}
我不知道它是否真的准确，但它是为了发展我的观点。希望能有所帮助。

好运'

如果你想用selector ":after"来改变元素的样式值你可以这样做:

    const a = document.querySelector('.a');
    a.classList.add("b");
    .a:after
    {
        height: 100px;
    }
    .b:after
    {
        height: 200px;
    }
    <div class="a"></div>

相关文章：