总结几个利用css中的expression对象实现的效果

最新推荐文章于 2021-06-17 00:06:36 发布

林愿星

最新推荐文章于 2021-06-17 00:06:36 发布

阅读量902

点赞数

CC 4.0 BY-SA版权

分类专栏：网页设计文章标签： css 测试 html function border table

本文链接：https://blog.youkuaiyun.com/linyuanxing/article/details/3396699

网页设计专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何利用IE特有的expression实现列表行背景色交替、鼠标悬停变色、背景图片循环显示及图片自动缩放等功能，适用于仅需兼容IE浏览器的项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

expression是优点和缺点都很明显的一个对象，因为它不被非IE的浏览器支持所有在网站开发中没有什么市场，但是如果你所开发的项目没有兼容其它浏览器的要求（比如我们公司开发的软件向来只考虑IE，毕竟是软件嘛，我们开发完的操作说明就可以写死“运行在IE环境下”），那么它还有很有必要了解一下儿的！
概念性的东西不讲了，你只需知道它是一个可以把javascript加入到CSS中的一个对象就OK了，近来在公司中总是在考虑软件的布局，目的是在公司的项目中全面引用div+css的布局方式，以求使程序员在开发系统时能够做到完全不考虑页面而只需要尊守基本的页面结构而已，今天说说在列表中运用expression来实现在一些常用的效果吧！当然以下的代码只能在IE环境下才有效！

第一个：交替变换的行背景色：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{...} .testGrid{...} .testGrid tr{font-size:12px;height:23px;background:expression('#eee,#ddd'.split(',')[rowIndex%2]);}</style> </head> <body> <table width="80%" class="testGrid" cellpadding="0" cellspacing="0"> <tr> <td>测试内容</td><td></td> </tr> <tr> <td>测试内容</td><td></td> </tr> <tr> <td>测试内容</td><td></td> </tr> <tr> <td>测试内容</td><td></td> </tr> <tr> <td>测试内容</td><td></td> </tr> <tr> <td>测试内容</td><td></td> </tr> </table> </body> </html>

第二个：鼠标移动变色，并且点击选中和取消选中项:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <style> body {} .testGrid {border-collapse: collapse;background:WhiteSmoke;} .selected {background:Burlywood;color:#fff;} .over {background:Bisque;} .testGrid td {border:#f4a460 1px solid;padding:5px;} .testGrid tr {font-size:12px; obj : expression(onclick=function (){if(this.className=='selected'){this.className='';}else{this.className='selected'};for(var i=0;i<this.parentNode.childNodes.length;i++){if(this.parentNode.childNodes[i]!=this){this.parentNode.childNodes[i].className='';}}},onmouseover=function (){if(this.className!="selected"){this.className="over";this.title='单击选中此项'}else{this.title='单击取消选中'}},onmouseout=function (){if(this.className!="selected"){this.className="";}}); } </style> </head> <body> <table width="80%" class="testGrid" cellpadding="0" cellspacing="0"> <tr> <td>测试内容</td> </tr> <tr> <td>测试内容</td> </tr> <tr> <td>测试内容</td> </tr> <tr> <td>测试内容</td> </tr> <tr> <td>测试内容</td> </tr> <tr> <td>测试内容</td> </tr> </table> </body> </html>

第三个：交替使用的行背景图片：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <mce:style></mce:style><style mce_bogus="1"> body {} .testGrid {border-collapse: collapse;background:WhiteSmoke;} .selected {background:Burlywood;color:#fff;} .over {background:Bisque;} .testGrid td {border:#f4a460 1px solid;padding:5px;padding:30px 0 0 0;height:70px;text-align:center;} .testGrid tr {font-size:12px; background :expression('url(http://www.zj-blog.com/temp/images/f'+(rowIndex%3+1)+'.gif) top center no-repeat'); }</style> </head> <body> <table width="70px" class="testGrid" cellpadding="0" cellspacing="0"> <tr> <td>测试内容</td> </tr> <tr> <td>测试内容</td> </tr> <tr> <td>测试内容</td> </tr> <tr> <td>测试内容</td> </tr> <tr> <td>测试内容</td> </tr> <tr> <td>测试内容</td> </tr> </table> </body> </html>

第四个：Css 图片自动缩放代码

一直以来有个很头疼的问题困扰着我，那就是图片缩放的问题，写到 JS 里面吧，不太容易修改。写到 CSS 里面吧，IE 6 又不支持 max-width，今天用了很久时间终于解决了这个问题，基本完美了，唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小，不过聊胜于无，总比进入页面后看到长长的横向滚动条舒服的多，这里使用了 expression，但是利用了一次加载，所以 expression 不会造成内存泄漏。当然，如果你有更好的解决方案，希望能与我交流。代码如下：

img{ max-width:520px;height:auto;cursor:pointer; }