How to access inline css style atribute and change proprties in DOM using jquery?

Question

I need to change the DOM dynamically. I want to access the 'text-align' and the 'line-height' properties.

for example:

<p style="line-height:1.0;text-align:justify;">

I need to access all the style attributes in the DOM and go through each 'text-align' and 'line-height' properties and change their values. How to access these properties. Actually what I need to do is go through these two properties and change the text-align to left and change the line-height to 1.5 if it's less than 1.5

Thank you so much inadvance.

As this style attribute can be anywhere, I need to go through all the style attributes and then should be able to access the two properties — user3547920
– user3547920, Commented Jun 1, 2014 at 15:24

Community · Accepted Answer · 2017-05-23 10:32:25Z

2

You can use $("#selector").css({'property' : 'value'});

from the docs : http://api.jquery.com/css/

You can set properties using this method.

Edit :
to check if an element has a css style, you can use the following SO answer :
jQuery: check if element has CSS attribute

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jun 1, 2014 at 15:23

Patrick

3,3752 gold badges22 silver badges31 bronze badges

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

Comments

Artem Petrosian · Accepted Answer · 2014-06-01 15:50:50Z

2

You can use .css method to achieve this:

$('p').css({'lineHeight':'1.0','textAlign':'right'})

Update:

If you want to select all elements that has line-height style you can use following selector:

$('*[style*="line-height"]').css({'lineHeight':'1.5'})

edited Jun 1, 2014 at 15:50

answered Jun 1, 2014 at 15:24

Artem Petrosian

2,9541 gold badge24 silver badges30 bronze badges

2 Comments

user3547920 Over a year ago

since the style attribute can be anywahere (inside a <p> tag or somewhere else) in that case I cant check for all the tags. so is there anyway I can access all the style attributes ans then check for the two properties?

Artem Petrosian Over a year ago

@user3547920 Yes, you can select all element that have line-height style like using this selector: '*[style*="line-height"]'

Vedant Terkar · Accepted Answer · 2014-06-01 15:42:40Z

1

Try:

$(document).ready(function(){
$("*").each(function(){
alert($(this).css('lineHeight'));
if($(this).css('lineHeight')){
$(this).css({'lineHeight':'1.0'});
}
if($(this).css('textAlign')){
    $(this).css({'textAlign':'right'});
}
});
});

Here $("*") will select all elements in DOM and then .css("propName") will check whether the propName property exists in that element's css. and if it exists then .css({'propname':'newValue'}); will assign a new value to that property.

Hope it helps.

edited Jun 1, 2014 at 15:42

answered Jun 1, 2014 at 15:31

Vedant Terkar

4,7228 gold badges38 silver badges63 bronze badges

1 Comment

user3547920 Over a year ago

Thank you. I need to get the excisting lineheight value and check wether it's less than 1.5 if so replace it with 1.5.

Senju · Accepted Answer · 2014-06-01 16:00:26Z

1

As mentioned before, you can use:

$('p').css({'lineHeight':'1.0','textAlign':'right'});

You can also use:

$('p').css('lineHeight', '1.0');
$('p').css('textAlign', 'right');

Although not recommended, because this would replace all other styles, you could even do:

$('p').attr('style', 'lineHeight: 1.0; textAlign: right;');

To select all elements on the dom, just use the $('*') selector.

$(document).ready(function(){
    $("*").each(function(){
        // 1.0 == 16px | 1.5 == 24px
        if(parseInt($(this).css('lineHeight'), 10) < 24){
            $(this).css({'lineHeight':'1.5'});
        }
    });
});

HERE is the JSFiddle

edited Jun 1, 2014 at 16:00

answered Jun 1, 2014 at 15:31

Senju

1,04510 silver badges26 bronze badges

2 Comments

user3547920 Over a year ago

Thank you. I need to get the excisting lineheight value and check wether it's less than 1.5 if so replace it with 1.5.

Senju Over a year ago

@user3547920 see if this helps

Collectives™ on Stack Overflow

How to access inline css style atribute and change proprties in DOM using jquery?

4 Answers 4

Comments

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related