creating image tag in html and adding css

Question

I am creating an image in jQuery like this but the border attribute doesn't seem to work... Is my syntax wrong?

    var img =
         $('<img>', {
            'title': 'Event  (Event '+wavy_counter+')',
            'class': 'listed_event',
            'id': 'wavy_event_'+wavy_counter+'',
            'data-count': ''+wavy_counter+'',
            'src': 'final_tutorial_buttons/wavy.png', 
            'height': '50', 
            'width': '50',
            'border': 'solid',
            'border': '2px',
            'border': 'red',
            'onclick': 'highlight.call(this);', 
            'data-start': '', 
            'data-end': ''
        });

I get a border but is black instead of red.

bfavaretto · Accepted Answer · 2012-03-07 19:18:03Z

4

I think it should be:

'style': 'border: 2px solid red',

It's been a long time I don't use the "native" HTML border attribute, but I think it only sets the border thickness. To define all the properties you want, you need CSS, hence the style attribute.

answered Mar 7, 2012 at 19:18

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

1 Comment

user1106925 Over a year ago

This is the only correct answer. If anyone wonders who down voted all the other answers, it was me, and I did it because all the other answers are wrong. FYI, you can use css:{border:'2px solid red'} and it will use jQuery's .css() method. This way you can use an object to set multiple styles.

Alex · Accepted Answer · 2012-03-07 19:34:04Z

2

Try combining the definitions and using the attr method instead:

$('<img />').attr({
    /* ... definitions ... */,
    src : 'final_tutorial_buttons/wavy.png',
    style : 'border:2px solid red;',
    /* ... definitions ... */,
});

edited Mar 7, 2012 at 19:34

answered Mar 7, 2012 at 19:16

Alex

35.5k5 gold badges81 silver badges94 bronze badges

Comments

peng · Accepted Answer · 2012-03-07 19:35:41Z

0

$(document).ready(function() {

   var img = $("<img />").attr("src","http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif").css({border: "2px solid red"});


   $("body").append(img );

});

Demo: http://jsfiddle.net/CXn6v/

answered Mar 7, 2012 at 19:35

peng

231 silver badge6 bronze badges

Comments

Richard S. · Accepted Answer · 2012-03-07 19:17:54Z

-2

Just a suggestion: have you tried using the Hex color code for red? #FF0000

answered Mar 7, 2012 at 19:17

Richard S.

7632 gold badges9 silver badges24 bronze badges

Collectives™ on Stack Overflow

creating image tag in html and adding css

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related