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

最新推荐文章于 2017-08-05 21:01:24 发布
原创 最新推荐文章于 2017-08-05 21:01:24 发布 · 567 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #测试 #table #html #datagrid #function

本文介绍了如何使用IE特有的expression属性实现行背景色交替、鼠标悬停变色及背景图片循环等效果，专为仅需兼容IE浏览器的项目设计。

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

         expression是优点和缺点都很明显的一个对象，因为它不被非IE的浏览器支持所有在网站开发中没有什么市场，但是如果你所开发的项目没有兼容其它浏览器的要求（比如我们公司开发的软件向来只考虑IE，毕竟是软件嘛，我们开发完的操作说明就可以写死“运行在IE环境下”），那么它还有很有必要了解一下儿的！
　　概念性的东西不讲了，你只需知道它是一个可以把javascript加入到CSS中的一个对象就OK了，近来在公司中总是在考虑软件的布局，目的是在公司的项目中全面引用div+css的布局方式，以求使程序员在开发系统时能够做到完全不考虑页面而只需要尊守基本的页面结构而已，今天说说在列表中运用expression来实现在一些常用的效果吧！这样子大家有以后不管是使用VS2003中的DataGrid还是VS2005中的GridView的时候都可以利用CSS对其实现一些常用的效果！当然以下的代码只能在IE环境下才有效！
　　第一个：交替变换的行背景色：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
 <head> 
 <title></title> 
 <style> 
 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> 
 <style> 
 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> 
Jorben
关注
css expression自适应,CSS中的行为——expression
weixin_29094775的博客
08-03 864
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一...
JSP四大作用范围概述
Hyo_yew的博客
03-21 705
在 Jsp 开发中，可以保存数据，Jsp 提供了四种数据保存范围；分别是:pagerequestsessionapplicationPage 范围：只在一个页面中保存数据； javax.servlet.jsp.PageContext(抽象类)Request 范围：只在一个请求中保存数据； javax.servlet.http.HttpServletRequest(接口)（在同一个服务器内转发时。转...
css控制 表格颜色交替
weixin_34026484的博客
03-24 186
2019独角兽企业重金招聘Python工程师标准>>> ...
html中a标签点击状态失效（覆盖）——link,visited,hover,active的顺序
热门推荐
吟游诗人——吟唱生命的不朽
08-05 1万+
html中，<a> 标签的点击事件有四个状态，分别是link、visited、hover、active，如果同时设置多个状态的显示且不按照一定状态的话，就会让一些效果被覆盖了。下面放一段错误代码，先设置hover，再设置visited，会发现当鼠标移上去后a的颜色还是白色（#fff），而不是想要的#f0a986，即a的hover的样式被visited的覆盖了。a:hover{ color:
css用expression来区分只读文本框
weixin_33939380的博客
01-28 121
<style type="text/css"><!-- input{ background:expression((this.readOnly &&this.readOnly==true)?"#CCCCCC":"")}--></style> <body><input type="text" name...
详解IE6中的position：fixed问题与随滚动条滚动的效果
10-19
IE6浏览器由于其特殊的文档对象模型和CSS处理方式，使得在该浏览器中实现某些CSS特性，比如position: fixed，变得比较复杂。在IE7及以上的浏览器中，position: fixed可以很方便地让一个元素固定在页面的某个位置，...
宿舍管理系统,灵活运用了HTML5、 CSS3和JSP以及Java Servlet等几项技术！
06-25
总结来说，这个宿舍管理系统是一个集成了前端和后端技术的综合应用，它利用HTML5和CSS3提供良好的用户体验，通过JSP和Java Servlet处理动态请求与响应，并借助Java强大的面向对象编程能力实现复杂业务逻辑。...
js实现tab切换效果
12-03
总结来说，实现Tab切换效果主要涉及以下几个核心概念： 1. **CSS样式**：通过CSS控制元素的显示与隐藏，以及样式变化。 2. **JavaScript DOM操作**：通过JavaScript获取DOM元素，并对其进行样式修改和事件绑定。 3....
【动态内容更新秘笈】：在Expression Web 4中实现网站动态功能
[【动态内容更新秘笈】：在Expression Web 4中实现网站动态功能](https://cdn.educba.com/academy/wp-content/uploads/2021/06/Dreamweaver-Features.jpg) # 摘要 随着网络技术的迅速发展，动态网站已成为现代网络...
【多语言网站构建攻略】：在Expression Web 4中轻松实现网站国际化
[【多语言网站构建攻略】：在Expression Web 4中轻松实现网站国际化](https://pollion.net/wp-content/uploads/2023/03/website-1024x538.jpg) # 摘要 随着全球化的推进，多语言网站已成为企业拓展国际市场的重要...
CSS中expression使用简介
08-09
关于CSS中expression的使用简介，从此可以在Css中使用javascript了
unbelievable! 通过Css调用Js代码?
weixin_33725270的博客
07-01 211
2019独角兽企业重金招聘Python工程师标准>>> ...
巧用expression来区分只读文本框和普通文本框的背景色
LxcJie的专栏
09-07 4205
        对于文本框,只读状态下和普通状态下,浏览器对其并没有做什么特殊的标记,表面看来,效果是一样的,这样,对用户来说,易用性并不是很高.        当然,我们可以改变只读文本框的背景颜色来加以区分,这个时候就需要程序员自己判断这个文本框是不是只读,然后再引入相应的css,无疑加大了工作量.          这里,使用expression来提供一种解决方案,只需要每个页面引入
css之expression用法
siashuayongsheng的专栏
05-19 260
[color=darkred] input{background-color:expression((this.readOnly && this.readOnly==true)?"#f0f0f0":"")} tr{ background-color:expression('#F8F8F8,#FFF000'.split(',')[rowIndex%2]); star:expre...
expression将JS、Css结合起来
weixin_33724570的博客
09-01 224
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员...
css expression
weixin_30270561的博客
11-13 175
概述 使用 优点 缺陷 实际应用 总结 概述 　　css expression(css表达式)又称Dynamicproperties(动态属性)是早期微软DHTML的产物，以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作用，从IE5开始得到支持，后因标准、性能、安全性等问题，微软从IE8 beta2标准模式开始，取消对css expression的支持。...
CSS中expression使用简介 http://vod.sjtu.edu.cn/help/Article_Show.asp?ArticleID=2224
专栏
07-27 1042
  定义 　　IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果
采用表达式树(Expression Tree)对一个对象的属性进行“遍历”
kmguo的专栏
02-26 9776
除去直接对类进行访问的方式之外，目前已经有三种方式，可以读取一个未知类型的对象的属性或字段。第一种也就是最常见的反射了，实现起来较为简单，但是如果每次要访问同一个类型的大量对象，则性能很差。第二种是采用Delegate的方式，参见：《采用Delegate对一个对象进行遍历，http://blog.csdn.net/kmguo/article/details/17392185》 这种方式也有缺点，就
JSP中树状结构实现的详细指南
在JSP中实现树形结构，通常需要以下几个步骤： 1. **数据库设计**：首先需要设计数据库表，存储树形结构的数据。通常会有一张表保存节点信息，可能还会有一张表表示节点之间的关系。 2. **后端逻辑**：在服务器端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值