動態 CSS

CSS expressions

可作動態的 CSS，例如元素的位置隨著滑鼠移動；隨時變動的顏色。expression IE5, IE6, IE7 有支援，IE8 以後不再支援；其它瀏覽器也沒有支援。expression 需要大量的動態計算，所以可能會讓你的網頁變慢。使用時要考慮前述兩個因素。其語法是：

css 特徵: expression( javascript 指令 ); <script type='text/javascript'> function cssColor() { with(Math) { var r=floor(random()*256)<<16; var g=floor(random()*256)<<8; var b=floor(random()*256); } return r+g+b; } </script> <style type='text/css'> .exp { width:expression(Math.floor(screen.width/5)); height:expression(Math.floor(screen.height/5)); background:expression( cssColor() ) } </style> <div class='exp'> CSS expressions </div>

• 風格用法：

  <script type='text/javascript'>
  function cssColor()
  {
    with(Math)
    {
      var r=floor(random()*256)<<16;
      var g=floor(random()*256)<<8;
      var b=floor(random()*256);
    }
    return r+g+b;
  }
  </script>
  <style type='text/css'>
  .exp { width:expression(Math.floor(screen.width/5));
         height:expression(Math.floor(screen.height/5));
         background:expression( cssColor() ) }
  </style>
  <div class='exp'>
  CSS expressions
  </div>
  

• 執行結果：
  CSS expressions

• 在 IE5, IE6, IE7 中，移動滑鼠，背景色會變化。