n.styleSheet.cssText = r;這個寫法是亮點,動態載入過css,但從來都沒這么載入過,在公司的項目中試了下,不一樣的感覺.很搞怪.
原帖:http://www.webchina110.cn/?p=328
今天網上閑逛，看到克軍寫了一句話，惡搞一下。憑著這句話的吸引力，我點進去了。
哇，居然頁面倒過來了，頁頭和頁腳翻了一個根頭，其實我以前還在想，背景圖片是不是可以這樣呢，今天至少在頁面上看到了。
真好奇，立即啟動火狐看了一下，哈哈，找到原因了，馬上在試了一下IE，搞定，也OK，哈哈，如果不知道的同學們，我想你們也想知道這是怎么回事吧。
其實就是這個東東在做怪。。。
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
三行代碼，分別用來支持moz，webkit和IE的內核的瀏覽器。
我們看看克軍是怎么做的呢，他使用了JS，讓代碼立即執行的方式。。給頁面增加一個<sytle>和相應的樣式，并且為body增加相應的class.下面我將他的js代碼貼出來。嘿嘿！
;(function(){
var d = document, n = d.createElement('style'), r='.flip { -moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }';
n.type = 'text/css';
if(n.styleSheet)
{
n.styleSheet.cssText = r;
}
else
{
n.appendChild(d.createTextNode(r))
}
d.getElementsByTagName('head')[0].appendChild(n);
d.body.className += ' flip';
}
為了使用document方便，他把document傳給了變量d,建立了一個style標簽為變量n，把樣式的內容傳給
了變量r，克軍的命名都很簡潔。
在為這個n其實就是style標簽了type這個屬性。
下面是進行判斷頁面中style有不有屬性，如果沒有，直接將r，也就是樣式的內容放入n中。
如果有，就得使用建立文本并且追加的方式。
我不知道我的解釋對不對哈，反正大概意思就是這樣的，歡迎指正。
一切準備就緒以后，就將n添加到head中去，在將class增加到body上，這樣頁面一加載。。。。你的頁面就會被旋轉180度，當然你可以旋轉90度，10度，數字是可以調整的喲。
2010.09.30 今天在使用過程中，最后發現，原來ie只支持4個值，分別旋轉值可以是1，2，3或4。這些數字分別代表90，180，270，或360度旋轉。