changing multiple 'CSS' using Jquery not working

Question

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.

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, Oct 25 '13 at 15:35
Maybe I'm missing some context, but `$(this)` and `$('#' + $(this).attr('id'))` should select the same element, no? — Jason P, Oct 25 '13 at 15:36
This is documented in the jQuery documentation. @JasonP You're right. Code redundancy there. — Stefan Dunn, Oct 25 '13 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, Oct 25 '13 at 15:39
@user2719875 in that case, I'd go with the class switching option. http://jsfiddle.net/3G6FT/ — Chad, Oct 25 '13 at 15:42
@Chad I can't switch or add classes, I have a huge script and long sctory short, if I change or add a class to showThis, then the code will break. — SilentDev, Oct 25 '13 at 15:51

score 2 · Accepted Answer · answered Oct 25 '13 at 15:38

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 ,

answered Oct 25 '13 at 15:38

choult

296
1
6

score 2 · Answer 2 · edited May 23 '17 at 12:10

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

edited May 23 '17 at 12:10

Community

1
1

answered Oct 25 '13 at 15:39

Zubzob

2,653
4
29
44

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. – SilentDev Oct 25 '13 at 15:47
not sure if you came across this solution provided by someone on SO (see my edited post) – Zubzob Oct 25 '13 at 15:53

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 25 '13 at 15:39

Maen

10,603
3
45
71

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). – SilentDev Oct 25 '13 at 15:50
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. – SilentDev Oct 25 '13 at 15:54

score 0 · Answer 4 · answered Oct 25 '13 at 15:39

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

answered Oct 25 '13 at 15:39

Jonathan Marzullo

6,879
2
40
46

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. – SilentDev Oct 25 '13 at 15:47
1

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 - http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ – Jonathan Marzullo Oct 25 '13 at 15:54

score 0 · Answer 5 · answered Oct 25 '13 at 15:41

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)

answered Oct 25 '13 at 15:41

Rohan Kumar

40,431
11
76
106

That normally works but I have a huge script and long story short, if I add a class, the code will break. – SilentDev Oct 25 '13 at 15:45

changing multiple 'CSS' using Jquery not working

5 Answers5

Edit