Here is my code:

var showThis = $(this).attr('id'); // div0, div1, div2 etc.
$('#' + showThis).attr('style', 'background-color: #063 !important, height: 520px');

I need the change the background-color, width and height of

#showThis

using the method used above since I cannot add or switch Classes (it breaks the rest of my code if I add a class to #showThis). Now what I have above works, however, it only changes the background-color height. I need to change the width as well. When I add

width: 20px

like so

at the end of it, it doesn't work for some reason. It stops changing both the width and height, changes the background-color. It doesn't give any javascript errors so the code works and the line does execute since it does change the background-color, but how e it doesn't change the width and height yet it only changes the one of the two?

Note: I need to use the !important tag (so I don't think .css instead of .attr works) and I am using I.E 8 and CSS (Not css3) if it helps.

Here is my code:

var showThis = $(this).attr('id'); // div0, div1, div2 etc.
$('#' + showThis).attr('style', 'background-color: #063 !important, height: 520px');

I need the change the background-color, width and height of

#showThis

using the method used above since I cannot add or switch Classes (it breaks the rest of my code if I add a class to #showThis). Now what I have above works, however, it only changes the background-color height. I need to change the width as well. When I add

width: 20px

like so

at the end of it, it doesn't work for some reason. It stops changing both the width and height, changes the background-color. It doesn't give any javascript errors so the code works and the line does execute since it does change the background-color, but how e it doesn't change the width and height yet it only changes the one of the two?

Note: I need to use the !important tag (so I don't think .css instead of .attr works) and I am using I.E 8 and CSS (Not css3) if it helps.

• javascript
• jquery
• css
• attr

• 4 To change CSS properties via jQuery, you should use $('#' + showThis).css({'background-color': '#063', 'height': '520px'}), etc. In my opinion, it would be much easier to just toggle a class with the predefined styles. – Chad Commented Oct 25, 2013 at 15:35
• 1 Maybe I'm missing some context, but $(this) and $('#' + $(this).attr('id')) should select the same element, no? – Jason P Commented Oct 25, 2013 at 15:36
• This is documented in the jQuery documentation. @JasonP You're right. Code redundancy there. – Stefan Dunn Commented Oct 25, 2013 at 15:39
• @Chad right but I need to have the !important tag. When I use the !important tag using .css it doesn't work. – SilentDev Commented Oct 25, 2013 at 15:39
• @user2719875 in that case, I'd go with the class switching option. jsfiddle/3G6FT – Chad Commented Oct 25, 2013 at 15:42

5 Answers 5

This isn't the best way of achieving what you want - jQuery has the css method as Chad says - but you want separate the background-color and height parts of your new style with a ; not a ,

Instead of using .attr() , you can use the .css() method passing an object with the desired styles as argument:

  $('#' + showThis).css({
       'background-color' : '#063',
       'height': '520px',
       'width': '20px'
    });

edit: Maybe this SO post will help you:

How to apply !important using .css()?

You're making several mistakes here.

First, when you use .attr('style', 'background-color: #063 !important, height: 520px');, you shouldn't separate your properties with , but with ;. That is why it doesn't work.

Secondly, you'd better use the solution provided by Chad to change your CSS, or add try to add a class?

Thirdly,

var showThis = $(this).attr('id'); // div0, div1, div2 etc.
$('#' + showThis) //...

doesn't make sense, as you take the id of your element to retrieve the element later. Just use $(this) instead of this.

Edit

I don't know exactly why you need !important, but you certainly should avoid it, and prefer CSS Precedence over it. It's likely to solve your problem if you absolutely need to override another property.

what about using the css() method instead

var showThis = $(this).attr('id'); // div0, div1, div2 etc.
$('#' + showThis).css({'backgroundColor': '#063', 'height': '520px'});

you dont need to use !important for inline styles

also background-color bees backgroundColor

Try with some Css Class like,

CSS

.active{
    background-color: #063 !important;
    height: 520px
}

SCRIPT

Use $(this) instead of$('#' + showThis) like,

$(this).addClass('active');//$(this) instead of $('#' + showThis)