1

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 come 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.

Improve this question
6
  • 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. 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? Commented Oct 25, 2013 at 15:36
  • This is documented in the jQuery documentation. @JasonP You're right. Code redundancy there. 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. Commented Oct 25, 2013 at 15:39
  • @user2719875 in that case, I'd go with the class switching option. jsfiddle.net/3G6FT Commented Oct 25, 2013 at 15:42

5 Answers 5

Reset to default
2

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 ,

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

Comments

2

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()?

Improve this answer

2 Comments

hm yea but i need to use the !important tag so I don't think .css would work, I tried it and it doesn't work.
not sure if you came across this solution provided by someone on SO (see my edited post)
1

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.

Improve this answer

2 Comments

right, the ',' instead of ';' solved it. I can't change / add classes, I have a huge script and long story short, if I add a class to #showThis then the code will break. Thirdly, yes $(this) should work, I just stored it in a variable because a couple lines below, I use another selector but later need to refer to the first $(this).
right, I am using the !important tag because there are external CSS files attached to it which I am not allowed to change. I am working for a company and they want to maintain a certain CSS for everything so I can't change the external CSS so then I started just using the !important tag, but yes CSS Precedence is certainly better.
0

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 becomes backgroundColor

Improve this answer

2 Comments

hm yea but i need to use the !important tag so I don't think .css would work, I tried it and it doesn't work.
when using !important, it should be added in your style sheet not on inline styles.. other wise you need to make your selector have more specificity - coding.smashingmagazine.com/2007/07/27/…
0

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)
Improve this answer

1 Comment

That normally works but I have a huge script and long story short, if I add a class, the code will break.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.