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