Adding attribute in jQuery ( do not overwrite )

Question

How can I add an attribute into specific HTML tags in jQuery?( I dont want to overwrite )

I have it in HTML:

<td style="width: 30%">Hello</td>

style="width:30%" is important.

Now I'm using a function () and adding attr:

$(cell_above_old).attr('style', 'vertical-align : middle;text-align:center;');

But the style is overwritten:

<td style="vertical-align : middle;text-align:center;">

What I want is to add the line to the existing style.

<td style="width:30%;vertical-align : middle;text-align:center;">

There is some function to do this?, such as:

$().attr('addStyle','styles');

Personally I'd say to just create some css classes and then use addClass removeClass, because that doesn't overwrite other things. — Luke Ramsden
– Luke Ramsden, Commented May 16, 2018 at 17:12

Taplar · Accepted Answer · 2018-05-16 17:13:13Z

2

$(cell_above_old).attr('style', 'vertical-align : middle;text-align:center;');

That is setting the entire attribute value. Change the css instead

$(cell_above_old).css({
    'verticalAlign': 'middle',
    'textAlign': 'center'
});

This will change just that css property in the style, leaving the rest alone.

answered May 16, 2018 at 17:13

Taplar

25k4 gold badges24 silver badges36 bronze badges

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

Comments

T.J. Crowder · Accepted Answer · 2018-05-16 17:14:12Z

1

This sort of thing is best done with classes. Add/remove classes with that styling as needed (via addClass, removeClass, and/or toggleClass).

But if you want to do it with an inline style, use css, not attr:

$(cell_above_old).css({
    verticalAlign: 'middle',
    textAlign: 'center'
});

answered May 16, 2018 at 17:14

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges