Javascript change style where style equals something

Question

I'm trying to add some style properties on an image but only if it already contains another property. I have more or less figure out how to do this with the following:

if ($('#content p img').css('float') == 'right')
    $('#content p img').css('margin-left', '20px').css('margin-bottom', '20px');

But this obviously changes all images so they have margin left and bottom. How can I do the same but only add the margin to the images that has the float: right; property?

I've added the `jquery` tag, as it looks like you're using `jquery` (and it matters to the answers people give) — T.J. Crowder, Dec 07 '12 at 10:29

score 5 · Accepted Answer · answered Dec 07 '12 at 10:30

5

Use filter:

$('#content p img').filter(function() {
    return this.style.float === "right";
}).css('margin-left', '20px').css('margin-bottom', '20px');

And you can call css just once if you like, passing in a set of changes to make:

$('#content p img').filter(function() {
    return this.style.float === "right";
}).css({
    'margin-left':   '20px',
    'margin-bottom': '20px'
});

answered Dec 07 '12 at 10:30

T.J. Crowder

1,031,962
187
1,923
1,875

1

Perfect! Thanks! I will mark your answer correct in 11 minutes. =) – just_user Dec 07 '12 at 10:32

score 4 · Answer 2 · answered Dec 07 '12 at 10:30

4

Try:

$('#content p img').each(function(){
    if($(this).css('float') == 'right') 
        $(this).css('margin-left', '20px').css('margin-bottom', '20px');
})

answered Dec 07 '12 at 10:30

Akhil Sekharan

12,467
7
40
57

Javascript change style where style equals something

2 Answers2