How can I set multiple CSS styles in JavaScript?

javascript coding-style
Mircea picture Mircea · Oct 19, 2010 · Viewed 273.7k times · Source

I have the following JavaScript variables:

var fontsize = "12px"
var left= "200px"
var top= "100px"

I know that I can set them to my element iteratively like this:

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

Is it possible to set them all together at once, something like this?

document.getElementById("myElement").style = allMyStyle

Answer

Felix Kling picture Felix Kling · Oct 19, 2010

If you have the CSS values as string and there is no other CSS already set for the element (or you don't care about overwriting), make use of the cssText property:

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

This is good in a sense as it avoids repainting the element every time you change a property (you change them all "at once" somehow).

On the other side, you would have to build the string first.

Related questions

typeof !== "undefined" vs. != null

I often see JavaScript code which checks for undefined parameters etc. this way: if (typeof input !== "undefined") { // do stuff } This seems kind of wasteful, since it involves both a type lookup and a string comparison, not to mention its verbosity. …

Read More
What's the best way to convert a number to a string in JavaScript?

What's the "best" way to convert a number to a string (in terms of speed advantage, clarity advantage, memory advantage, etc) ? Some examples: String(n) n.toString() ""+n n+""

Read More
Declaring multiple variables in JavaScript

In JavaScript, it is possible to declare multiple variables like this: var variable1 = "Hello, World!"; var variable2 = "Testing..."; var variable3 = 42; ...or like this: var variable1 = "Hello, World!", variable2 = "Testing...", variable3 = 42; Is one method better/faster than the other?

Read More