javascript - How to change css property of content:url in jquery? - Stack Overflow

admin管理员组

文章数量:1410674

I have a problem:

<div id="arrow"></div>
<div id="p0" style="content: url(images/cerchioSelezionato.png)"></div>
<div id="p1" style="content: url(images/cerchio.png)"></div>

My goal is: when i click on #arrow element, I want that the image of #p0 bee cerchio and vice versa for this I wrote this code in jQuery:

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").attr({content:url(images/cerchioSelezionato.png)});
       $("#p0").attr({content:url(images/cerchio.png)});
    }
}

When I click on arrow in chrome the console gives me this error:

Uncaught ReferenceError: url is not defined 
slider_script.js:12(anonymous function)     slider_script.js:12m.event.dispatch jquery-1.11.1.min.js:3r.handle

I have a problem:

<div id="arrow"></div>
<div id="p0" style="content: url(images/cerchioSelezionato.png)"></div>
<div id="p1" style="content: url(images/cerchio.png)"></div>

My goal is: when i click on #arrow element, I want that the image of #p0 bee cerchio and vice versa for this I wrote this code in jQuery:

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").attr({content:url(images/cerchioSelezionato.png)});
       $("#p0").attr({content:url(images/cerchio.png)});
    }
}

When I click on arrow in chrome the console gives me this error:

Uncaught ReferenceError: url is not defined 
slider_script.js:12(anonymous function)     slider_script.js:12m.event.dispatch jquery-1.11.1.min.js:3r.handle

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Dec 5, 2014 at 14:53 joumvaer92joumvaer92 25233 silver badges1414 bronze badges 1

• the value needs to be a quoted string – charlietfl Commented Dec 5, 2014 at 14:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try ...

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").attr({style: "content:url(images/cerchioSelezionato.png)" });
       $("#p0").attr({style: "content:url(images/cerchio.png)" });
    }
}

You're changing the Style attribute, but the content attribute.

Use .css() instead of .attr() to manipulate the style. Also, I think you forgot to quote.

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").css({content:'url(images/cerchioSelezionato.png)'});
       $("#p0").css({content:'url(images/cerchio.png)'});
    });
});

While the keys don't have to be quoted in Javascript object, the values have to be.

Since you only change the content you can use the syntax .css('content', ... ) instead of the object notaion. I kept it the way you did it so you may add rules in the future.

you can try this one also

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").css('content','url(images/cerchioSelezionato.png)');
       $("#p0").css('content','url(images/cerchio.png)');
    }
}

本文标签： javascriptHow to change css property of contenturl in jqueryStack Overflow