CSS expression屬性

時間 2019-12-10

標籤 css expression 屬性欄目 CSS 简体版

原文原文鏈接

expression屬性是在IE5版本以後支持使用的，用來把CSS屬性和JavaScript腳本關聯起來。簡單粗暴的說，該屬性是用來調用JavaScript代碼的。css

CSS屬性後面是一段JavaScript代碼，CSS的值是JavaScript表達式計算的結果。html

給元素固有屬性賦值

.box1{
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop+80)); /* 這裏須要獲取滾動高度+元素本來的高度 */
    z-index: 999;
}

document.documentElement.scrollTop 的意思是獲取當前頁面滾動條所滾動到的位置的數值，而再用eval()函數把它計算成數值。express

這句代碼最終的意思就是：你瀏覽器窗口的滾動條滑到哪，這個元素的位置就在哪。瀏覽器

給元素自定義屬性賦值

用CSS自定義屬性Expression對錶格行間隔背景批量定義性能優化

<html>
  <head>
  <title></title>
  <style type="text/css">
  tr{ bg:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); }
  </style>
  </head>
  <body>
  <table width="100%" border="0">
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
 </table>
 </body>
</html>

上面的代碼能夠實現表格行背景色（#F8F8F8,#EFEFEF）交替出現，不須要每行單獨定義。函數

bg是本身任意定義的屬性。在自定義屬性與expression之間可別忘了還有一個引號，由於實質仍是CSS，因此放在style標籤內，而非script內。性能