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

【问题标题】：querySelectorAll - Can I put a selector with ":after"?querySelectorAll - 我可以用“：after”放置一个选择器吗？
【发布时间】：2015-07-22 07:49:06
【问题描述】：

我可以在 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 代码中的一部分。

我想知道是否可以将 ":after" 放在 querySelectorAll 中。它会保持 s1 属性吗？

【问题讨论】：

你的意思是::after？
@Bergi 不是一回事吗？
也许吧，虽然技术上只有两个冒号，但它是一个伪元素。
Changing CSS pseudo-element styles via JavaScript 的可能副本

标签： javascript css selectors-api

【解决方案1】：

您无法在 Javascript 中操作 :after，但您可以使用诸如 Access the css ":after" selector with jQuery 之类的类切换。

编辑： 你能解释更多的上下文吗？否则，这不是关于 jQuery，而是关于方法：

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;
}

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

祝你好运

【讨论】：

或者你可以使用document.getElementById('foo2').nextSibling;
@RedBreast 我不知道如何使用 jQuery。如果有办法在 javaScript 中做到这一点，请告诉我。附：请查看我在代码中所做的修改。也许你会知道我在做什么:)
@Deni2994 由于我是新来的，我不知道帖子编辑是否会向您发送通知。看看吧。
@ozil 我其实不知道这个方法。它适用于伪元素吗？
@RedBreast 它不起作用。我会用我的所有代码和一个演示发布一个问题，然后我会给你一个链接，看看我到底要做什么。

【解决方案2】：

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

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

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

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

您可以阅读更多关于它的信息here

如果您还想更新值，请使用answer

【讨论】：

【解决方案3】：

如果你还想用选择器 ":after" 改变元素的样式值，你可以这样做：

    const a = document.querySelector('.a');
    a.classList.add("b");

    .a:after
    {
        height: 100px;
    }

    .b:after
    {
        height: 200px;
    }

    &lt;div class="a"&gt;&lt;/div&gt;

【讨论】：