Using :before via Jquery

Question

I have the current issue: I define via CSS the current role for a div element

.divElement:before {
    background-image: url(../images/triangle.png);
    background-repeat: no-repeat;
    content: "";
    height: 20px;
    left: 62%;
    margin: 0 0 0 -50px;
    position: absolute;
    top: -20px;
    width: 100px;
}

.divElement{
    background: none repeat scroll 0 0 #FFF8D6;
    border-radius: 10px 10px 10px 10px;
    color: black;
    font: 1em/1.4 Cambria,Georgia,sans-serif;
    margin: 0px 500px 3em;    
    padding: 15px;
    position: relative;
    text-align: center;
}

I created this element dynamically using jQuery: $('<div class="divElement"><p><strong></strong></p></div>').appendTo(....) this works correctly. The issue becomes when using jQuery and I try to dynamically change the backgroung-image and the top attribute of the content before the divElement (which I define in CSS with :before)

I tried something like this for the background-image, but doesn't work:

$('.divElement:before').css('background-image', 'url(../images/triangle_reverse.png)');

How can I do that? Thank to all !!!

score 1 · Answer 1 · answered Sep 04 '12 at 08:18

1

The following will search for all nodes with class .divElement, take the corresponding elements that appear before tem and change their background images. Is that what you're trying to accomplish?

$('.divElement').prev().css('background-image', 'url(../images/triangle_reverse.png)');

answered Sep 04 '12 at 08:18

sudoremo

2,274
2
22
39

thank for your immediate response and yes i try to change the background image and top attribute of the element that appear before ...but still doesn't work... – user1645419 Sep 04 '12 at 08:26

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

I think your best solution is to keep the styling in the CSS for this one (as in this answer) and simply use the addClass function in jQuery. Here's an example:

.divElement:before {
    background-image: url(../images/triangle.png);
}

.divElement.reverse:before {
    background-image: url(../images/triangle_reverse.png);
}

Then in jQuery all you need to is add the class reverse like this:

$('.divElement').addClass("reverse");

You can even easily toggle between on and off states using:

$('.divElement').toggleClass("reverse");

edited May 23 '17 at 11:56

Community

1
1

answered Sep 04 '12 at 08:25

Steve O

5,224
1
24
26

Just be aware that the :before pseudo-class selector does not work in IE versions earlier than IE 8. – sudoremo Sep 04 '12 at 12:37

Using :before via Jquery

2 Answers2