CSS的expression使用简介

CSS expression 是一种在 CSS 中嵌入 JavaScript 代码的特殊方式，在某些场景下可以实现一些有用的效果。本文将为您介绍如何使用 CSS expression。

什么是 CSS expression

CSS expression 使用类似于下面的语法结构：

property: expression;

其中，property 表示要应用 expression 的属性，expression 则是 JavaScript 代码片段，它可以访问当前元素的属性值，计算结果即为该属性的值。

如下所示，我们为一个 div 元素定义了一个宽度值，该值的计算使用了 JavaScript 表达式：

div {
  width: expression( document.body.clientWidth > 800 ? "800px" : "auto" );
}

表达式中，使用了三目运算符来判断当前页面宽度是否大于 800 像素，如果是，则宽度值为 800 像素，否则为自适应。

CSS expression 的应用

利用 expression 更新 IE6 下 img 元素的宽高

在 IE6 中，img 元素的宽高默认是按照图片的实际尺寸来计算的，如果需要将其设为固定值，可以使用 expression：

img {
  width: expression( this.width > 500 ? "500px" : this.width+"px" );
  height: expression( this.height > 500 ? "500px" : this.height+"px" );
}

在上面的代码中，利用了 this.width、this.height 来获取图片本身的大小，如果宽或高大于 500 像素，则将其固定为 500 像素，否则保持原来的值。

利用 expression 实现动态字体大小调整

有时候我们希望根据页面宽度动态调整字体大小，可以通过 expression 来实现：

html {
  font-size: expression( (document.body.clientWidth / 1200) * 62.5 + "%" );
}

上面的代码中，我们使用了 document.body.clientWidth 来获取页面宽度，然后根据相关比例来计算字体大小，最终将之设为一个百分比值。

总结

CSS expression 可以在一些场景下实现一些有用的效果，但它的使用需要谨慎。当浏览器不支持 expression，或者禁用了 JavaScript 时，将无法正常渲染样式。因此，我们应该尽可能地避免使用 expression，而是采用其他更为合适的解决方案。