《五》避免 CSS 表达式

避免 CSS 表达式：

CSS 表达式是动态设置 CSS 属性的一个强大但危险的方式。

例如：大多数浏览器会忽略以下 widrh 属性而使用 min-width 属性，因为它们不支持 CSS 表达式； IE 则会忽略 min-width，而根据文档的宽度动态地设置 width 属性。

width: expression(document.body.clientWidth < 600 ? '600px' : 'auto");
min-width: 600px;

CSS 表达式从自动绑定到浏览器事件中获益，但这也是它的缺陷，在无关事件发生时也会对表达式求值，导致对其进行的求值的频率比期望的要高。例如上面的例子，它们不只在页面呈现和大小改变时求值，当页面滚动、甚至用户鼠标在页面上移过时都要求值。

有两种技术可以避免 CSS 表达式频繁求值：

1. 创建一次性表达式：如果 CSS 表达式必须被求值一次，那么可以在这一次执行中重写它自身。

   <style>
   p{
   	background-color: expression(altBgcolor(this));
   }
   </srtle>
   
   <script type="text/javascript">
   	function altBgcolor(elem){
   		elem.style.backgroundColor = (new Date()).getHours() % 2 ? "#F08A00" : "#B8D4EF"
   	}
   </script>
   

2. 使用事件处理器取代 CSS 表达式：使用事件处理器来为特定的事件提供所期望的动态行为，避免在无关事件发生时对表达式的求值。