实例讲解css中的行为：expression和behavior
本文将通过实例讲解CSS中的expression和behavior的用法。但是需要注意的是：较多的使用css中的行为，会极大的消耗客户端资源。从而影响网页的渲染速度。所以并不推荐大范围的使用css行为。
结构、表现、行为，分离和联系
网页三要素——结构、表现、行为。这个大家都很清楚（如果你对此不是很熟悉，这里可以这样狭义的理解——结构就是HTML，表现就是CSS，行为就是JavaScript）。为了能写出高内聚、低耦合、可以重复使用，符合web标准的网页，将这三层分离开来是必不可少的，所以在HTML结构中直接写“style="……"”的做法是不提倡的。但是分开并不表示“一刀两断”，作为一个网页的三个组成部分，他们之间还必须保持着联系。例如，结构和表现，用css选择符联系着，而结构和行为用事件联系着。那表现和行为用什么联系着呢？其实联系他们之间的纽带就是我们今天要讲的css中的行为。
表现和行为的联系
好像很多的朋友都感觉：CSS和JavaScript之间有什么关系呀？好像没有必要保持什么联系吧？ 的确，在很多情况下，他们直接很少联系，甚至在有必要联系的情况下，也可以间接的转化为结构和行为之间的联系。而且，随着最新的浏览器对css2甚至css3的支持不断完善，结构和行为之间的联系也在不断的在弱化。但是，表现和行为之间的联系，在一些特殊处理，特别是在对IE5-IE6的特效兼容性上，却有着非常大的应用。
下面让我们来看个简单的例子——
很简单，就是一个列表而已。现在我们想在这些列表上，实现一个用户体验更好的改变：当鼠标移到每个列表项上，这个列表的背景颜色高亮显示。对，很实用的一个改变而已。如果我没有猜错的话，你第一想到的应该是下面的代码——
没有必要感到害羞，这没有什么错，而且完全实现了效果。只是，当boss说：“麻烦把其他页面的所有列表都实现这个效果”的时候，你会比较抓狂而已。毕竟在整个项目的所有页面中找到所有的li标签，并在里面复制上两句代码绝对不是一个令人舒服的工作。
为什么不试试css中的expression。在公用的css样式表文件中，加入下面的样式，即可立刻实现对所有li标签的效果——
对，就是一句“star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})”就实现了刚才的效果，而且没有对前台结构做任何改变。
这就是expression的作用，一个轻量级的关于样式的行为方式的实现。
见鬼！又变了！
上面的效果真的不错，鼠标浮上去背景高亮显示的效果受到了顾客的好评。以至于顾客说：“这个效果真的不错，能不能给所有的表格单元、引用标签、超链接全部加上这种效果。” 为了满足顾客的兽欲，没有办法，咱只能改呀。于是，你对有td 、blockquote和a标签都加上了这玩意。这是你还多了一个心眼，为了防止顾客对li、td、blockquote和a要不同的高亮显示背景，你把他们分开写了。于是样式表中，非常壮观的出现了下面的代码——
li{
star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})
}
td{
star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})
}
blockquote{
star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})
}
a{
star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})
}
star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})
}
td{
star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})
}
blockquote{
star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})
}
a{
star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})
}
顾客对你的反应速度赶到很满意，但是可惜的是：这个顾客只是一个小角色，真正需要的并不是他，而是他的上级BOSS点头，项目才可以验收。好在，那个上级顾客没有提什么过分的要求，只是说：“我希望高亮显示的颜色变成绿色，高亮的文字最好能变成红色，而且鼠标的样子要变成手指的样子！”
虽然那个小角色顾客一开始拍着胸脯说：“绝对不会变了，这就是我们的效果”。但是真正出钱的是那个“上级BOSS顾客”。所以，没有办法，我们也只能改了。这时候为了系统的可扩展性和可维护性，我建议你使用behavior行为。因为作为轻量级的expression解决方案已经不是最好的选择了。
站长工具
相关文章
请稍等，评论加载中...