Applying css style to an :after pseudo-element on a javascript call

Question

I have a dropdown div I would need to make slide down when a certain element is clicked, so I wrote a js function and so far it seemed to work. To this certain element I used :before and :after to create an arrow-like figure which I would need to change style to according if the dropdown div is slide down or up.

function opere_slide(){

    ul=document.getElementById('opere');
    opere_tag=document.getElementById('opere_tag');
    margin=ul.style.marginTop;
    if(margin=='0px'){
       ul.style.marginTop='-200px';
       opere_tag.style.backgroundColor='white';
       opere_tag.style.borderBottomColor='#BCD2EE';
    }
    else{
       ul.style.marginTop='0px';
       opere_tag.style.backgroundColor='#F8F8F8';
       opere_tag.style.borderBottomColor='#E0E0E0';
    }
}

That's why I added to the above function a peace that should create an HTML style element and so apply the new css code I was needing. Problem is: function doesn't seem to work anymore.

function opere_slide(){

    head=document.getElementsByTagName('head')[0];
    stylesheet=document.createElement('style');
    ul=document.getElementById('opere');
    opere_tag=document.getElementById('opere_tag');
    margin=ul.style.marginTop;
    if(margin=='0px'){
       ul.style.marginTop='-200px';
       opere_tag.style.backgroundColor='white';
       opere_tag.style.borderBottomColor='#BCD2EE';
    }
    else{
       ul.style.marginTop='0px';
       opere_tag.style.backgroundColor='#F8F8F8';
       opere_tag.style.borderBottomColor='#E0E0E0';
       text=document.createTextNode('div#opere_tag:before{border-top:10px solid #E0E0E0;}
       div#opere_tag:after{border-top:10px solid #F8F8F8;}');
       stylesheet.appendChild(text);
       head.appendChild(stylesheet);
    }
}

P.S.: one last thing might be important.. The function is internal to a php echo function that "echoes" the HTML script element.. That is why I only used single quotes.

Community · Accepted Answer · 2017-05-23 10:34:26Z

2

theres a syntax-error due to the linebreak in your textnode-string:

text=document.createTextNode('div#opere_tag:before{border-top:10px solid #E0E0E0;}
   div#opere_tag:after{border-top:10px solid #F8F8F8;}');

just remove that linebreak:

text=document.createTextNode('div#opere_tag:before{border-top:10px solid #E0E0E0;} div#opere_tag:after{border-top:10px solid #F8F8F8;}');

for more information, please take a look at "How do I break a string across more than one line of code in JavaScript?" here on SO.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Jun 17, 2012 at 20:52

oezi

51.9k10 gold badges102 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gavriel · Accepted Answer · 2012-06-17 20:55:13Z

0

you can try something like:

<div class="???">
 ...
</div>

when you scroll you change the class on the div to scrollDown or scrollUp, and change your css so it has the different arrows on

.scrollUp div#opere_tag:after{...}
.scrollDown div#opere_tag:after{...}

answered Jun 17, 2012 at 20:55

Gavriel

19.3k13 gold badges73 silver badges116 bronze badges

1 Comment

BigCola Over a year ago

Nice idea, thanks very much.. If I can't get it to work probably will use this :)

Collectives™ on Stack Overflow

Applying css style to an :after pseudo-element on a javascript call

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related