Yahoo!用户界面博客（YUIBlog）

自己的样式

在用户交互修改DOM元素的风格，是DHTML的接口，在平稳过渡的州，（希望）直观的方式创建的支柱之一。 在DOM中的每个HTML元素包含style ，相应的CSS属性的浏览器所理解的属性的集合。 对于启用JavaScript和CSS的浏览器，将包含以下两段红色文字：

 < - 第1款 - >
 <p style="c​​olor: #f00">本款是红色的</ P>

 < - 第2款 - >
 <p id="x">本款的颜色将是红色的，之后的JavaScript运行</ P>
 <script type="text/javascript">
 （函数（）{
     VAR EL =（'X'）;

     el.style.color ='＃F00;

 }）（）;
 </ SCRIPT>

即使CSS属性是不适用的一个给定的元素，将代表该元素的style集合。 例如，甚至<br>元素将有el.style.letterSpacing财产。

已更改名称，以保护无辜

在JavaScript中的样式属性的名称是骆驼套管的CSS版本，所以在CSS中的font-family成为el.style.fontFamily在样式集合。 “浮”在JavaScript中的保留字，所以CSS的float属性被赋予了不同的名称。 在Internet Explorer中， styleFloat ，火狐，Safari和Opera都的使用cssFloat （Opera还支持styleFloat ，实际上）。 此外，每个浏览器都有一个专有的CSS属性的主机，也表明在风格上集合了（EG -moz-border-radius ，成为el.style.MozBorderRadius在Firefox）。 比的其他styleFloat / cssFloat ，浏览器厂商在很大程度上同意在非专有的属性名称。

疯狂和方法

我设置了文件，属性，目前在每个A级浏览器的style集合（使他们的特定值的功能支持任何索赔）。

对于每一个浏览器，我用一个简单的for (var prop in el.style)方法来遍历风格的集合，如果可用的开发工具和交叉检查。 具体来说，我用下面的：

* - Safari浏览器不枚举未分配的样式属性，所以for ( in )不显示任何有用的。

所有测试都做了一台Macbook运行OSX 10.4临。 非法入境者和FF2的Parallels上运行Windows XP的实例进行了测试。 我只记录供应商标识符（如万盎司），未使用前缀属性，和省略的方法和荟萃领域，如setProperty和length 。 唯一的例外，这是cssText ，我将讨论更多关于购买。 所以事不宜迟...

在A级（加几）浏览器的样式属性

黄金背景的属性是目前在所有测试的浏览器。

关于注style.cssText

DOM level2行情规范定义的cssText属性

声明块（不包括周围的花括号）的可分析文本表示。 设置此属性将导致在新的价值分析和声明块中的所有属性，包括拆除或物业此外复位。

这意味着你可以设置一气呵成，通过设置样式属性el.style.cssText = myCSSTextString 。 此外，该字符串的格式是正确的正常的CSS语法，如你将在标签的样式属性分配（ <p style="color: red; padding: 1em 2em; border-bottom: 2px solid #ccc">Hello world</p> 你甚至可以设置属性不止一次在相同的字符串，浏览器将调和的重复，因为它会解析样式表时。

有cssText与使用的一些注意事项进行赋值，但是。

• Opera将抛出一个错误，如果有任何畸形字符串的CSS。 （规格建议抛出一个错误，如果分配的值有语法错误，是unparsable将使值“unparsable的”的CSS有一个讨论，但所有其他的浏览器悄悄地忽略他们不明白的声明。）
• Firefox 2中可以重用cssText的电流值（如用+ =追加）在转让时改变背景位置的y值。 这是固定在FF3。

可能有其他方面的考虑，我还没有发现。 在另一面，基准测试表明，分配是唯一通过单一属性cssText略慢比样式集合中设置相应的属性，并设置多个属性通过更快cssText 。 歌剧9.27是唯一的例外，它总是更快（在我的测试中，至少）直接设置的样式属性。

有乐趣让你的风格！

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！