JavaScript onClick change css

Question

This is probably really simple, I know you can change css properties with javascript by doing;

document.getElementById('bob').style.background='#000000';

But I recently found out that you can do this differently and style multiple things, so something like this;

document.getElementById('bob').css='background:#ffffff; color: #000000;';

the problem is I have forgotten what the code, So what I basically want to achieve is what goes in instead of the ".css"? Does anyone know the code I need out the top of their head?

nope :( grrrr, should have written it down

Lenny Magico
– Lenny Magico

2011-05-30 12:45:01 +00:00
Commented May 30, 2011 at 12:45 — Lenny Magico
– Lenny Magico, Commented May 30, 2011 at 12:45

jAndy · Accepted Answer · 2011-05-30 12:46:05Z

20

I guess you're looking for the .cssText property from style

document.getElementById('bob').style.cssText = 'background:#ffffff; color: #000000;';

Example: http://jsfiddle.net/Sx5yH/

answered May 30, 2011 at 12:46

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

1 Comment

jAndy Over a year ago

@Šime Vidas: as far as I can tell, yes! But I don't know about IE6 and below or FF < 3 for instance.

kapa · Accepted Answer · 2011-05-30 12:47:02Z

8

Have a look at this fiddle: http://jsfiddle.net/YSJfz/

document.getElementById('myDiv').setAttribute('style', 'background: #f00; color: #fff;');

All I do is change the style attribute of the element, is that what you meant to accomplish?

edited May 30, 2011 at 12:47

kapa

78.9k21 gold badges166 silver badges178 bronze badges

answered May 30, 2011 at 12:45

Kevin

5,6843 gold badges30 silver badges42 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:07:50Z

3

I think what you is looking for is Change an element's class with JavaScript. Since this way you don't need to hardcode all the style changes on the JavaScript itself (which is bad).

So you'll have a CSS class like it:

.myClass {
    background: #ffffff;
    color: #000000;
}

And you'll set to your element like this:

document.getElementById("MyElement").className += " myClass";

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered May 30, 2011 at 12:47

Erick Petrucelli

15.1k9 gold badges68 silver badges89 bronze badges

1 Comment

Lenny Magico Over a year ago

Yeh I know you can do it this way, but I think I need the .cssText for what I'm trying to do, but thanks anyway :D

melhosseiny · Accepted Answer · 2011-05-30 12:49:52Z

2

document.getElementById('bob').style.cssText = 
    'background:#ffffff; color: #000000;';

answered May 30, 2011 at 12:49

melhosseiny

10.2k6 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

JavaScript onClick change css

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related