CSS2.0中expression如果使用

本篇文章為大家展示了CSS2.0中expression如果使用，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)專注于復(fù)興網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供復(fù)興營銷型網(wǎng)站建設(shè)，復(fù)興網(wǎng)站制作、復(fù)興網(wǎng)頁設(shè)計(jì)、復(fù)興網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造復(fù)興網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供復(fù)興網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

CSS2.0中的expression應(yīng)用

IE5及其以后版本支持在CSS中使用expression，用來把CSS屬性和Javascript表達(dá)式關(guān)聯(lián)起來，這里的CSS屬性可以是元素固有的屬性，也可以是自定義屬性。就是說CSS屬性后面可以是一段Javascript表達(dá)式，CSS屬性的值等于Javascript表達(dá)式計(jì)算的結(jié)果。在表達(dá)式中可以直接引用元素自身的屬性和方法，也可以使用其他瀏覽器對象。這個(gè)表達(dá)式就好像是在這個(gè)元素的一個(gè)成員函數(shù)中一樣。

給元素固有屬性賦值

例如，你可以依照瀏覽器的大小來安置一個(gè)元素的位置。

ExampleSourceCode

#myDiv{  position:absolute;  width:100px;  height:100px;  left:expression(document.body.offsetWidth-110+\"px\");  top:expression(document.body.offsetHeight-110+\"px\");  background:red;  }

給元素自定義屬性賦值

例如，消除頁面上的鏈接虛線框。通常的做法是：

ExampleSourceCode

<ahrefahref=\"link1.htm\"onfocus=\"this.blur()\">link1</a> <ahrefahref=\"link2.htm\"onfocus=\"this.blur()\">link2</a> <ahrefahref=\"link3.htm\"onfocus=\"this.blur()\">link3</a>

粗看或許還體現(xiàn)不出采用expression的優(yōu)勢，但如果你的頁面上有幾十甚至上百個(gè)鏈接，這時(shí)的你難道還會機(jī)械式地Ctrl+C，Ctrl+V么，何況兩者一比較，哪個(gè)產(chǎn)生的冗余代碼更多呢？

◆采用expression的做法如下：

ExampleSourceCode

<styletypestyletype=\"text/css\"> a{star:expression(onfocus=this.blur)}  </style> <ahrefahref=\"link1.htm\">link1</a> <ahrefahref=\"link2.htm\">link2</a> <ahrefahref=\"link3.htm\">link3</a>

說明：里面的star就是自己任意定義的屬性，你可以隨自己喜好另外定義，接著包含在expression()里的語句就是JS腳本，在自定義屬性與expression之間可別忘了還有一個(gè)引號，因?yàn)閷?shí)質(zhì)還是CSS，所以放在style標(biāo)簽內(nèi)，而非script內(nèi)。OK，這樣就很容易地用一句話實(shí)現(xiàn)了頁面中的鏈接虛線框的消除。不過你先別得意，如果觸發(fā)的特效是CSS的屬性變化，那么出來的結(jié)果會跟你的本意有差別。例如你想隨鼠標(biāo)的移進(jìn)移出而改變頁面中的文本框顏色更改，你可能想當(dāng)然的會認(rèn)為應(yīng)該寫為：

ExampleSourceCode

<styletypestyletype=\"text/css\"> input  {star:expression(onmouseover=this.style.backgroundColor=\"#FF0000\";  onmouseout=this.style.backgroundColor=\"#FFFFFF\")}  </style> <styletypestyletype=\"text/css\"> input{star:expression(onmouseover=this.style.backgroundColor=\"#FF0000\";  onmouseout=this.style.backgroundColor=\"#FFFFFF\")}  </style> <inputtypeinputtype=\"text\"> <inputtypeinputtype=\"text\"> <inputtypeinputtype=\"text\">

可結(jié)果卻是出現(xiàn)腳本出錯(cuò)，正確的寫法應(yīng)該把CSS樣式的定義寫進(jìn)函數(shù)內(nèi)，如下所示：

ExampleSourceCode

<styletypestyletype=\"text/css\"> input{star:expression(onmouseover=function()  {this.style.backgroundColor=\"#FF0000\"},  onmouseout=function(){this.style.backgroundColor=\"#FFFFFF\"})}  </style> <inputtypeinputtype=\"text\"> <inputtypeinputtype=\"text\"> <inputtypeinputtype=\"text\">

注意：不是非常需要，一般不建議使用expression，因?yàn)閑xpression對瀏覽器資源要求比較高！

上述內(nèi)容就是CSS2.0中expression如果使用，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：CSS2.0中expression如果使用
鏈接地址：http://muchs.cn/article4/isjdoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、網(wǎng)站排名、網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)