Pseudo-element CSS dynamically using JavaScript

Question

Is it possible to set the CSS of a pseudo-element dynamically? For example:

jQuery dynamically styling help container

$('#help').css({
    "width" : windowWidth - xOffset,
    "height" : windowHeight - yOffset,
    "bottom" : -windowHeight,
    "left" : 200
});

jQuery Attempt at setting the inner border of the help container:

$('#help:before').css({
    "width" : windowWidth - xOffset,
    "height" : windowHeight - yOffset
});

CSS file for the above

#help
{
    opacity: 0.9;
    filter:alpha(opacity=90);   
    -moz-opacity: 0.9;          
    z-index: 1000000;
    bottom: -550px;
    left: 400px;
    background-color: #808080;
    border: 5px dashed #494949;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;        
}
#help:before 
{
    border: 5px solid white;
    content: '';
    position: absolute;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;          
}

possible duplicate of Setting CSS pseudo-class rules from JavaScript — thirtydot
– thirtydot, Commented Aug 23, 2011 at 17:09

Community · Accepted Answer · 2017-05-23 12:19:52Z

5

You can't do it directly through jQuery.

Look at this question: Setting CSS pseudo-class rules from JavaScript

@Box9's answer is probably the one you should actually use:

I threw together a small library for this since I do think there are valid use cases for manipulating stylesheets in JS.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Aug 23, 2011 at 17:11

thirtydot

229k51 gold badges393 silver badges354 bronze badges

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

Comments

Blazemonger · Accepted Answer · 2011-08-23 17:02:31Z

0

Rather than setting the width and height using .css(), you should just use .width() and height() directly.

answered Aug 23, 2011 at 17:02

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

1 Comment

Jack Over a year ago

Can you post the code for this, my code doesn't work: $('#help:before').width(windowHeight - 410) .height(windowHeight - 210);

Collectives™ on Stack Overflow

Pseudo-element CSS dynamically using JavaScript

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