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

Question

Can I do this in 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;
            }

I also put a part from my CSS code.

I want to know if I can put the ":after" inside a querySelectorAll. Will it maintain s1 properties?

Maybe, though technically only with two colons it's a pseudo-element. — Bergi, Jul 22 '15 at 08:48
possbile duplicate of [Changing CSS pseudo-element styles via JavaScript](http://stackoverflow.com/q/4481485/1048572) — Bergi, Jul 22 '15 at 08:49

ymz · Answer 1 · 2020-03-31T16:32:34.280

Well, if you are using (relatively) modern browser, then - yes, you can!

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

You can then use getPropertyValue to retrieve css values. for instance:

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

You can read more about it here

If you also wish to update values, please use this answer

score 3 · Answer 2 · edited May 23 '17 at 12:32

3

You can't manipulate :after in Javascript, but you can play with class toggles like Access the css ":after" selector with jQuery .

EDIT: Could you maybe explain more the context? Otherwise, this is not about jQuery, but about the method:

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

I don't know if it's really accurate, but it was to develop my point. Hope it might help.

Good Luck'

edited May 23 '17 at 12:32

Community

1
1

answered Jul 22 '15 at 08:00

Alexis B.

1,105
8
13

1

or you can use `document.getElementById('foo2').nextSibling;` – ozil Jul 22 '15 at 08:06
@RedBreast I don't know how to work with jQuery. If there is a way to do it in javaScript, please tell me. P.S. please see the modification I made in my code. Maybe you will get an idea of what I am trying to do :) – Pikachuu Jul 22 '15 at 08:36
@Deni2994 As I'm fairly new here, I don't know if the post edit send you a notification. Have a look on it. – Alexis B. Jul 22 '15 at 09:22
@ozil I actually did not know this method. Does it work on pseudo-elements? – Alexis B. Jul 22 '15 at 09:30
@RedBreast It doesn't work. I'll post a question with all my code and a demo and then I will give you the link to see what exactly I have to do. – Pikachuu Jul 22 '15 at 09:48
I have put my whole code [here](http://stackoverflow.com/questions/31560228/javascript-see-the-back-on-folding-simulation) – Pikachuu Jul 22 '15 at 10:15

score 0 · Answer 3 · edited Sep 15 '21 at 06:38

0

If you want also to change style value of elements with selector ":after" you can do something like this:

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

    .a:after
    {
        height: 100px;
    }

    .b:after
    {
        height: 200px;
    }

    <div class="a"></div>

edited Sep 15 '21 at 06:38

cursorrux

1,382
4
9
20

answered Sep 14 '21 at 11:30

Milosz

1

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

3 Answers3

Linked

Related