Utilising cssText to set styles with JavaScript_问答_开发者

Utilising cssText to set styles with JavaScript

开发者 https://www.devze.com 2022-12-23 08:18 出处：网络

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

相关专题：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 y开发者_如何学JAVAou 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.

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