Yahoo!用戶界面博客（YUIBlog）

自己一個風格

在用戶交互修改DOM元素的風格，是創造的DHTML界面，從一個狀態過渡到平穩狀態的支柱之一，（希望）直觀的方式。 DOM中的每一個style包含風格，相應的CSS屬性的屬性的集合所理解的瀏覽器。 JavaScript和CSS功能的瀏覽器，將包含以下兩段紅色文字：

 < - 第1 - >
 <p /> #f00">本款是紅色 </ P>

 < - 第2款 - >
 <p id="x">本款的顏色將是紅色的JavaScript運行後 </ P>
 <script type="text/javascript">
 （函數（）{
     EL =的document.getElementById（'X'）;

     el.style.color =“＃F00”;

 })();
 </ SCRIPT>

即使不適用的一個給定的元素的CSS屬性，將代表該style的樣式集合。 例如，甚至<br>元素將有el.style.letterSpacing財產。

已更改名稱，保護無辜者

JavaScript中的樣式屬性的名稱是駱駝套管版本的CSS， font-family家庭成為在el.style.fontFamily el.style.fontFamily樣式集合中。 “浮”在JavaScript中的保留字，所以CSS的float屬性是一個不同的名稱。 在Internet Explorer中， styleFloat使用，火狐，Safari和Opera都使用cssFloat （Opera還支持styleFloat ，實際上）。 另外，每個瀏覽器都有一個專有的CSS屬性的主機，也表現出的風格集合-moz-border-radius邊界半徑el.style.MozBorderRadius成為el.style.MozBorderRadius在Firefox ）。 比其他styleFloat / cssFloat ，瀏覽器廠商在很大程度上同意在非專有的屬性名稱。

瘋狂和方法

我載文件的屬性在每個A級瀏覽器的style集合（關於其具體值的功能支持的任何索賠）。

對於每個瀏覽器，我用一個簡單的迭代式的收集，交叉檢查中如果有一個for (var prop in el.style)道具）方法。 具體來說，我用下面的：

* -野生動物園不枚舉未分配的樣式屬性for ( in ) （）不顯示任何有用的東西。

所有測試都是在MacBook Pro運行 OSX 10.4。 非法入境者和FF2的測試 Parallels的運行 Windows XP的實例。 我只記錄沒有前綴與供應商標識符（EG - MOZ），省略了方法和領域，如元setProperty setProperty length長度。 唯一的例外這是cssText ，我將討論更多。 所以事不宜遲 ... ...

在A級（加幾）瀏覽器的樣式屬性

黃金背景的屬性是目前在所有測試的瀏覽器。

關於注style.cssText

DOM level2行情規格定義cssText財產

聲明塊（不包括周圍的花括號）的可分析文本表示。 設置此屬性將導致新的價值和重置聲明塊中的所有屬性，包括取消或屬性除了解析。

這意味著你可以設置你所有的樣式屬性，通過設置el.style.cssText = myCSSTextString = myCSSTextString。 此外，正確的格式字符串是正常的CSS語法，如你會在標籤的樣式屬性分配<p style="color: red; padding: 1em 2em; border-bottom: 2px solid #ccc">Hello world</p>您好<p style="color: red; padding: 1em 2em; border-bottom: 2px solid #ccc">Hello world</p> 你甚至可以設置屬性不止一次在相同的字符串，瀏覽器將調和解析樣式表時，因為它會重複。

，但是有一些注意事項與使用cssText賦值。

• 歌劇院將拋出一個錯誤，如果有任何字符串的格式不正確的CSS。 （該規範建議拋出一個錯誤，如果所賦的值有語法錯誤是unparsable有什麼可以讓一個值“unparsable”的CSS的討論，但所有其他的瀏覽器忽略他們不明白的聲明。）
• Firefox 2中可以改變的背景位置的y值，重用的cssText值cssText轉讓（如與+ =追加）。 這是固定在FF3的。

可能有其他方面的考慮，我還沒有發現。 在另一面，基準測試表明，分配一個通過單一屬性cssText只是稍微慢比樣式集合中設置相應的屬性，並設置多個屬性顯著通過更快cssText cssText 。 歌劇 9.27是唯一的例外，它總是更快（在我的測試中，至少）直接設置的樣式屬性。

有樂趣讓你的風格！

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us | Digg它！ | 書籤交易！