使用 cssQuery
cssQuery是由業(yè)界大牛Dean Edwards開發(fā)的一個(gè)Javascript組件。它就是為CSS 選擇器而生的。它可以支持幾乎所有的CSS 選擇器,包括CSS3選擇器。當(dāng)然它在實(shí)現(xiàn)的時(shí)候進(jìn)行了分級(jí),分別針對(duì)CSS1,CSS2和CSS3制作了一個(gè)獨(dú)立的js包,以及一個(gè)標(biāo)準(zhǔn)包。支持所有A級(jí)瀏覽器。
簡(jiǎn)單的用法:
var tags = cssQuery("body > p"); var tags = cssQuery("[href]"); var tags = cssQuery("a[href='#']");
然后你就可以自己寫一些js為相應(yīng)的對(duì)象添加想用的樣式了。
我建議對(duì)支持CSS高級(jí)選擇器的瀏覽器使用原生的CSS選擇器寫法,然后通過cssQuery在IE中動(dòng)態(tài)的為響應(yīng)的元素添加一個(gè)樣式名。
比如,我們可以這樣寫CSS:
a[herf='#'],a.empty{color:red}
這里的第一條CSS3選擇器是用于Firefox/webkit等支持CSS3選擇器的非IE瀏覽器的,a.empty是專門為IE而寫。然后通過CSSQuery動(dòng)態(tài)的在IE瀏
覽器中為對(duì)應(yīng)的元素添加樣式:
var tags = cssQuery("a[href='#']"); tags.className="empty";
當(dāng)然,上面的這段js最好使用IE的條件注釋。
使用 jQuery
據(jù)說jQuery的選擇器比cssQuery要快很多。當(dāng)然,無可否認(rèn),jQuery的選擇器是目前流行的js框架中最好用的一個(gè)。而使用jquery來實(shí)現(xiàn)類似上述功能要方便很多,因?yàn)閖Query的選擇器更好用。
OK,jQuery的做法和cssQuery有些類似,CSS可以寫成上面一樣的,JS可以這樣寫:
$("a[href='#']").addClass("empty");
更具體的用法可以查看我之前寫的一個(gè)小例子《使用jQuery創(chuàng)建個(gè)性化鏈接樣式》
使用 DOMAssistant
DOMAssistant也是一個(gè)很不錯(cuò)的JS庫,它提供了一些類似jQuery的功能,比如CSS 選擇器、事件以及一些DOM操作。它的優(yōu)點(diǎn)就是小巧,壓縮后只有9KB,我想這就是Keith Clark選擇DOMAssistant來作為ie-css3.js的基礎(chǔ)框架的主要原因吧。jQuery越來越肥胖了,而且用于實(shí)現(xiàn)這個(gè)功能有些浪費(fèi)了。而且DOMAssistant的用法和jQuery非常類似。
事實(shí)上,DOMAssistant的選擇器和對(duì)DOM的CSS Class的操作與jQuery一模一樣。
$("a[href='#']").addClass("empty");
欲了解更多,可查看DOMAssistant官方,以及下載官方中文PDF文檔
總結(jié)
其實(shí),無論是ie-css3.js本身,還是后來我們討論的三種替代方法,都是一種方法,就是用js動(dòng)態(tài)的添加class到頁面元素中。不同是ie-css3自動(dòng)化的完成了這些工作,而后面的三種方案要自己動(dòng)手根據(jù)自己的項(xiàng)目寫一些js來實(shí)現(xiàn)。我認(rèn)為ie-css3最方便,基本不用怎么維護(hù),但是它一刀切,效率比較低,而且靈活性差,不適合于ajax項(xiàng)目。而后面的這幾種方案靈活性強(qiáng),但是要做很多額外的工作,無論你是將IE專用樣式獨(dú)立到一個(gè)專用的css文件中還是像文中寫的那樣和CSS3選擇器寫到一起,都會(huì)大大的增加你的工作量和維護(hù)成本。
為IE,我們要額外付出很多。
有更好的想法或創(chuàng)意嗎?歡迎與我們分享。
轉(zhuǎn)載:http://www.qianduan.net/use-advanced-css3-selectors-in-ie.html
本文鏈接:http://www.95time.cn/tech/web/2010/7788.asp
出處:前端觀察
責(zé)任編輯:bluehearts
上一頁 在IE中使用高級(jí)CSS3選擇器 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|