CODEWITHSUNDEEP
javascript
Rajat
Rajat

Reputation: 34148

Utilising cssText to set styles with JavaScript

I was going through Nicholas Zakas presentation on JavaScript here : http://www.slideshare.net/nzakas/writing-efficient-javascript (slide number: 89/139)

He recommends using cssText property whenever you are setting a bunch of styles through JavaScript. The best solution is obviously adding those styles to a class and then using JS to add the classname to an element.However, in many situations, We resort to just setting the properties directly within JS when the number of properties are low.

It seems from his presentation that using cssText property would be more efficient in such scenarios.I tried to look up more on the property but couldn't find much information.

Has anyone used the 'cssText' property ? It would be great to have some more technical info on how the property helps.

Upvotes: 0

Views: 2579

Answers (1)

npup
npup

Reputation: 2541

It's a string representation of the inline styles set on an element.

<head>
<style type="text/css">
 .foo {color: #d0d;}
</style>
</head>
<body>
 <p id="e0" class="foo" style="border:2px solid #654;">foo</p>
</body>

console.log(document.getElementById('e0')); gives "border: 2px solid rgb(102, 85, 68);" in my setup (which in the inline style and not anything from the class).

If you are setting many styles on an element, it is good to set them in one go as a string (using this property) to avoid triggering the reflows that can happen when setting certain style properties.

Links:
msdn take on cssText
phpied.com reflow discussion

Upvotes: 1

Related Questions