Add Class Based on Style Attribute

Question

The CMS I'm using doesn't seem to apply a class name if the element is floated left or right. I was hoping to not have to mess with the TinyMCE code stuff, and instead do this with jQuery.

Right now, when I align an image to the left or right, it will add the styles inline with the image like so:

<img src="image.jpg" style="float:left">

I was hoping that for those elements that have that style applied, I could add a class name of "alignleft". I tried this, but it does not work:

$( 'a[ style=' + 'float: left;' + ']' ).addClass( 'alignleft' );

Thoughts?

I don't know why you're concatenating one string with another instead of just writing the string in the first place 'a[ style=float: left;]' — Popnoodles
– Popnoodles, Commented Dec 24, 2013 at 0:16

David Thomas · Accepted Answer · 2013-12-24 00:31:38Z

4

I'd suggest selecting the possible elements that might be float: left and then filtering to find those that are, and adding the class-name of alignleft to those:

$('a, img').filter(function(){
    return this.style.float === 'left';
}).addClass('alignleft');

This approach avoids the requirement that the style attribute must begin with the, and be exactly, style="float: left;", including the precise white-space.

Of course, this approach does require that the float: left is assigned in the inline style attribute; if there's a chance that it might be assigned in a stylesheet, whether external or in the head of the page, then you'd have to use jQuery's css() method (which can call getComputedStyle() or currentStyle() to parse those stylesheets (unless you want to do so yourself), leading to:

$('a, img').filter(function(){
    return $(this).css('float') === 'left';
}).addClass('alignleft');

References:

edited Dec 24, 2013 at 0:31

answered Dec 24, 2013 at 0:24

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

5 Comments

Popnoodles Over a year ago

Great in theory but this.float is undefined.

Khamidulla Over a year ago

"This approach avoids the requirement that the style attribute must begin with the, and be exactly, style="float: left;", including the precise white-space." <- what about using ~= instead of = then?

David Thomas Over a year ago

@ant: that would work, certainly, but I'm not sure what the benefit would be? The above approaches avoid parsing the string of the style attribute, which seems/feels better to me. I Can't offer any evidence that it's any faster, or actually better, but it's how I prefer to do it is all.

Markus Kottländer Over a year ago

@antindexer: ~= would still not match if there aren't any whitespaces. you have to use a combined version of the attribute selector i would suggest. See popnoodles answer, I added a second code example.

Khamidulla Over a year ago

@MarkusKottländer if yu see my answer I provide link about selectors so it is just food for brain. I hope other part can be distinguished by the person who asks question.

Khamidulla · Accepted Answer · 2013-12-24 01:19:05Z

2

Try to put double quotation mark after = sign and and before closing ] symbol. And style~= should be used instead of = sign. This means style attribute contains float:left string.

$( 'a[ style~="' + 'float: left;' + '"]' ).addClass( 'alignleft' );

Here is working example in jsFiddle.

For them who concern:

if you considering the float: left or float:left can not be distinguished by attribute selector. Watch this:

$( 'a[style*="' + 'float:left' + '"], a[style*="' + 'float: left' + '"]' ).addClass( 'alignleft' );

This will work for everything with space or with out the space. See here if your are short of understanding what I want to explain here. Of course some developers with curvehands.dll installed can say that it will not work for more then one space in attribute parameter. Can consider to use what ever they like and give answer as they whanted.

EDIT. Read more about selectors here.

edited Dec 24, 2013 at 1:19

answered Dec 24, 2013 at 0:16

Khamidulla

2,9736 gold badges39 silver badges60 bronze badges

6 Comments

Popnoodles Over a year ago

This won't work. The style attribute is float:left which will not be caught in that selector.

David Thomas Over a year ago

But why are you concatenating two strings? I know that's how the OP wrote it, but...it still doesn't make sense, unless I'm missing something?

Khamidulla Over a year ago

First of all it is given example by OP. And in future 'float: left;' will be changed string variable I guess.

Khamidulla Over a year ago

to @popnoodles it can be used by *= selector then. The person who asked question should read reference which I provide about selectors.

Popnoodles Over a year ago

The element's style attribute has no space and no semicolon. *= isn't going to find float: left;. But I covered that in my answer (which I deleted as David's is the most appropriate and most robust solution).

|

Markus Kottländer · Accepted Answer · 2013-12-24 00:54:15Z

1

$('img[style*="float"][style*="left"]').addClass('alignleft');

http://jsfiddle.net/rzp79/

EDIT Well ok, you can't use it if you also have a border-left for example.

edited Dec 24, 2013 at 0:54

answered Dec 24, 2013 at 0:44

Markus Kottländer

8,2844 gold badges42 silver badges61 bronze badges

1 Comment

Khamidulla Over a year ago

This will not do the trick. Just consider this case float:right and align:left. Does it make sense?

Collectives™ on Stack Overflow

Add Class Based on Style Attribute

3 Answers 3

5 Comments

6 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

6 Comments

1 Comment

Related