首頁 > 開發者 > CSS

CSS中expression簡介–實現對象批量控制

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

定義
　　IE5及其以後版本支援在CSS中使用expression，用來把CSS屬性和Javas cript運算式關聯起來，這裡的CSS屬性可以是元素固有的屬性，也可以是自訂屬性。就是說CSS屬性後面可以是一段Javas cript運算式，CSS屬性的值等於Javas cript運算式計算的結果。 在運算式中可以直接引用元素自身的屬性和方法，也可以使用其他瀏覽器對象。這個運算式就好像是在這個元素的一個成員函數中一樣。

　　給元素固有屬性賦值

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

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

　　給元素自訂屬性賦值

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

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

　　粗看或許還體現不出採用expression的優勢，但如果你的頁面上有幾十甚至上百個連結，這時的你難道還會機械式地Ctrl+C，Ctrl+V麼，何況兩者一比較，哪個產生的冗餘代碼更多呢？

　　採用expression的做法如下：

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

　　說明：裡面的star就是自己任意定義的屬性，你可以隨自己喜好另外定義，接著包含在expression()裡的語句就是JS指令碼，在自訂屬性與expression之間可別忘了還有一個引號，因為實質還是CSS，所以放在style標籤內，而非s cript內。OK，這樣就很容易地用一句話實現了頁面中的連結虛線框的消除。不過你先別得意，如果觸發的特效是CSS的屬性變化，那麼出來的結果會跟你的本意有差別。例如你想隨滑鼠的移進移出而改變頁面中的文字框顏色更改，你可能想當然的會認為應該寫為

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

　　可結果卻是出現指令碼出錯，正確的寫法應該把CSS樣式的定義寫進函數內，如下所示：

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

　　注意

　　不是非常需要，一般不建議使用expression，因為expression對瀏覽器資源要求比較高

=======================================================================

利用css裡expression來實現介面對象的批量控制

問題說明: 用過css樣式我們就知道, 可以定義一批對象的class屬性來指定同一個樣式來統一介面. 但如何統一同類型的對象的事件? 比如:介面有無數個 <img src="**.jpg"> 如何?滑鼠經過此圖片, 圖片的src變成是**_over.jpg?
解決方案: 使用css的expression方法,
具體實現要看看.css的寫法:
/*替換圖片CSS*/
#imgScript {      /*這裡使用對象ID來通配樣式, 也可以定義一個css函數*/
star:expression(
onmouseover = function()
{
/*替換圖片*/
if(this.hover != null){
this.name = this.src;
this.src = this.src.replace(’.jpg’, ’_over.jpg’);
this.HasChg = 1;
}
},
onmouseout = function()
{
/*還原本來的圖片*/
if(this.HasChg != null){
this.src = this.name;
this.HasChg = null;
}
}
)
}/*end imgScript*/
應用樣式的img:
<img src="a.jpg">
請將滑鼠放在a.jpg上看看效果

=======================================================================

可以把JavaScript代碼，寫在css裡嗎?

沒有做不到的，只有想不到的！我們可以先寫好JS代碼，然後再在CSS中調用它即可：

　　首先寫JS（javascritp）：

<script language="javascript">  
    
//定義table的樣式.cellSpacing,cellPadding   
//borderColorLight       ,borderColorDark.   
    
function       table3d(obj)       {   
      obj.border=1;   
      obj.cellSpacing=0;   
      obj.cellPadding=0;      
      obj.borderColorLight="#ffffff";   
      obj.borderColorDark="#ffffff";   
}
    
//定義td的樣式.       bgColor   
//borderColorLight,       borderColorDark   
    
function       td3d(obj)       {   
      obj.bgColor="#0000ff";   
      obj.borderColorLight="#ffffff";   
      obj.borderColorDark="#eeeeee";   
}   
</script>   

　　再寫樣式表：
    
<style>   
<!--定義樣式-->   
.table3d{wwwfan:expression(table3d(this))}   
.td3d{wwwfan:expression(td3d(this))}   
</style>

　　在表格中應用樣式：

<table class=table3d> <!--應用table3d樣式-->
<tr align="center">
<td width="100" class=td3d>立體</td> <!--應用td3d樣式-->
<td width="100" class=td3d>表格</td> <!--應用td3d樣式-->
</tr>
</table>

　　說明：

　　.table3d{wwwfan:expression(table3d(this))}

　　.table3d 定義一個class,不用我再羅嗦了吧！
wwwfan 是自已定義的屬性,可以用你的英文名任意取個名字！因為這是你自己的CSS啊！
expression()裡面的語句就是JavaScript. 一定很熟悉吧！
table3d(this). 調用了前面寫的函數。這個函數很簡單，只是包含了對borderColorLight、borderColorDark、cellSpacing等的定義。

===============================================

--------------------表格隔行換色一----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行換色二</title>
<style type="text/css">
<!--
tr {
background-color:expression((this.sectionRowIndex%2==0)?"red":"blue");
}
-->
</style>
</head>
<body>
</HEAD>
<table>
<tr>
<td>第1行</td><td>第1行</td>
</tr>
<tr>
<td>第2行</td><td>第2行</td>
</tr>
<tr>
<td>第3行</td><td>第3行</td>
</tr>
<tr>
<td>第4行</td><td>第4行</td>
</tr>
<tr>
<td>第5行</td><td>第5行</td>
</tr>
</table>
</body>
</html>

--------------------表格隔行換色二----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行換色一</title>
<style type="text/css">
<!--
.DoubleColorTable tr {
background-color:expression("#F1F8FF,#ffffff".split(",")[rowIndex%2])
}
-->
</style>
</head>

<body>
<table border="1" cellpadding="0" cellspacing="0" bordercolorlight="#6C7BA6" bordercolordark="#ffffff" bgcolor="#DEEFFF" class="DoubleColorTable">
    <tr>
      <td>123456789</td>
      <td>45873123456</td>
      <td>4587312345</td>
      <td>4587312345</td>
      <td>4587312345</td>
    </tr>
    <tr>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;123456789456123348</td>
      <td>&nbsp;23456789</td>
    </tr>
    <tr>
      <td>&nbsp;123456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
    </tr>
    <tr>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
    </tr>
    <tr>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
    </tr>
</table>
</body>
</html>

--------------------表格隔行換色三----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>   
.db tr{   
background-color:expression('#000000,#333333,#555555,#777777,#999999,#bbbbbb,#dddddd,#ffffff'.split(',')[rowIndex%8]);   
}   
</style>
<title>表格隔行換色三</title>
</head>

<body>  
<table width="100%" border="1" class="db">   
<tr>   
<td>aaaaaaaaaaaaaa</td>   
</tr>   
<tr>   
<td>bbbbbbbbbbbbbbb</td>   
</tr>   
<tr>   
<td>cccccccccccc</td>   
</tr>   
<tr>   
<td>fffffffffffff</td>   
</tr>   
</table>   
    
上面是每一行隔行換色每兩行一迴圈，下面是每一行隔行換色，每八行一迴圈   
</body>
</html>

--------------------表格隔行換色四----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行換色四</title>
<style type="text/css" media="screen">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
.t1 {background-color:#fff;}/* 第一行的背景色 */
.t2 {background-color:#eee;}/* 第二行的背景色 */
.t3 {background-color:#ccc;}/* 滑鼠經過時的背景色 */
-->
</style>
</head>
<body>
<ul><li>11111111</li>
<li>222222222</li>
<li>3333333</li>
<li>444444444</li>
</ul>
<script type="text/javascript">
<!--
var Ptr=document.getElementsByTagName("li");
function $() {
      for (i=1;i<Ptr.length+1;i++) {
      Ptr[i-1].className = (i%2>0)?"t1":"t2";
      }
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
      Ptr[i].onmouseover=function(){
      this.tmpClass=this.className;
      this.className = "t3";
    
      };
      Ptr[i].onmouseout=function(){
      this.className=this.tmpClass;
      };
}
//-->
</script>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
expression expression output css css ellipsis css oblique css scheduler css selectors css alarms
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More