CSS中使用expression表达式

CSS中使用expression表达式是一种动态设定CSS属性的方式。常见应用场景是在IE6/IE7浏览器中，通过表达式实现一些基于时间、窗口大小等动态效果，例如动态计算div元素的高度、宽度等。

CSS中使用expression表达式是一种动态设定CSS属性的方式。常见应用场景是在IE6/IE7浏览器中，通过表达式实现一些基于时间、窗口大小等动态效果，例如动态计算div元素的高度、宽度等。

expression表达式是一段JS代码，需要放在CSS属性值内部并用大括号“{ }”包裹起来，注意需要在第一个大括号之后添加“javascript:”前缀。

下面是详细的使用攻略：

1.简单示例

示例1：当页面宽度小于800px时，让某个div元素的背景颜色变为红色，否则变为蓝色。

div{
   background-color: #333;
   color: #fff;
   width: 80%;
   margin: 0 auto;
   height: 200px;
   padding: 20px;
   font-size: 18px;
   font-weight: bold;
   text-align: center;
   /* 接下来使用expression表达式来实现颜色动态变化 */
   background-color: expression(document.body.clientWidth < 800 ? 'red' : 'blue')
}

在上述代码中，我们使用了document.body.clientWidth来获取当前页面的宽度，根据当前页面宽度的大小判断div元素的背景颜色，小于800像素时为红色，大于800像素时为蓝色。

2.多属性联动示例

示例2：让一个div元素的宽度、高度、边框宽度等属性随着页面宽度自适应调整。

div{
  background-color: #f9f9f9;
  border: solid 2px #ddd;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  /*接下来使用expression表达式来动态计算宽、高、边框宽度等*/
  width: expression(document.body.clientWidth > 1200 ? '50%' :
      document.body.clientWidth > 800 ? '70%' : '90%');
  height: expression(document.body.clientWidth > 1200 ? '400px' :
      document.body.clientWidth > 800 ? '300px' : '200px');
  border-width: expression(document.body.clientWidth > 1200 ? '4px' :
      document.body.clientWidth > 800 ? '3px' : '2px');
}

在上述代码中，我们针对不同的页面宽度设置了不同的div属性值，如宽度、高度、边框宽度等，通过expression表达式实现了这些属性值的动态变化。

注意：虽然使用expression表达式能够达到动态生效的效果，但是其会对页面的性能产生一些影响，因此应该尽量减少expression表达式的使用。