Applying CSS properties to an image with variables in JS

Question

I'm trying to add css properties to an image that is set to a variable:

<script>
var img = '<img src="../common/img/check-mark.png">';
var imgCheck = img.css({'border':'1px solid red'});
$(function(){
    $('.content li').before(imgCheck);
});
</script>

The image shows up without the css properties:

<script>
var img = '<img src="../common/img/check-mark.png">';
$(function(){
    $('.content li').before(img);
});
</script>

If I add the css properties after the .before, it applies the css to the whole li.

<script>
var img = '<img src="../common/img/check-mark.png">';
$(function(){
    $('.content li').before(img).css({'border':'1px solid red'});
});
</script>

David Thomas · Accepted Answer · 2015-01-11 17:26:02Z

1

The problem is that you create a string of HTML, not a jQuery object containing an <img> element:

var img = '<img src="../common/img/check-mark.png">';

And then try to use the CSS method on that string, which can't work, as strings don't have a css() method; instead you'd first need to create a jQuery object (using that string of HTML):

$(img).css({'border' : '1px solid red'});

var img = '<img src="http://placekitten.com/g/250/250/" />';

$(img).css({'border' : '1px solid red'}).appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

References:

css().

answered Jan 11, 2015 at 17:26

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

Comments

Pointy · Accepted Answer · 2015-01-11 17:26:26Z

1

You don't have an <img> in a variable; you have the HTML code for an image. You can do what you're trying to do like this:

var img = $("<img/>", {
  src: "../common/img/check-mark.png",
  css: { border: "1px solid red" }
});

answered Jan 11, 2015 at 17:26

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

six fingered man · Accepted Answer · 2015-01-11 17:32:15Z

1

.before() returns the element(s) being operated on, not the element you inserted.

Reverse the operation like this:

$(img).insertBefore('.content li').css({'border':'1px solid red'});

or create it like this:

$("<img>", {
    src: "../common/img/check-mark.png",
    css: {border:'1px solid red'},
    insertBefore: ".content li"
});

edited Jan 11, 2015 at 17:32

answered Jan 11, 2015 at 17:26

six fingered man

2,50016 silver badges16 bronze badges

Comments

surajck · Accepted Answer · 2015-01-11 17:26:50Z

0

$('.content li').before(img).css({'border':'1px solid red'});

Here you are adding the CSS to $('.content li')

Add it to the img handle: $(img).css({'border':'1px solid red'});

answered Jan 11, 2015 at 17:26

surajck

1,1759 silver badges24 bronze badges

Collectives™ on Stack Overflow

Applying CSS properties to an image with variables in JS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related