`
quliangjun
  • 浏览: 19271 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS中expression简介--实现对象批量控制--在CSS中调用JS代码--表格隔行换色

    博客分类:
  • jsp
阅读更多

定义
  IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

  给元素固有属性赋值

  例如,你可以依照浏览器的大小来安置一个元素的位置。

#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 + "px");
top: expression(document.body.offsetHeight - 110 + "px");
background: red;
}

  给元素自定义属性赋值

  例如,消除页面上的链接虚线框。 通常的做法是:

<a href="link1.htm" onfocus="this.blur()">link1</a>
<a href="link2.htm" onfocus="this.blur()">link2</a>
<a href="link3.htm" onfocus="this.blur()">link3</a>

  粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?

  采用expression的做法如下:

<style type="text/css">
a {star : expression(onfocus=this.blur)}
</style>
<a href="link1.htm">link1</a>
<a href="link2.htm">link2</a>
<a href="link3.htm">link3</a>

  说明:里面的star就是自己任意定义的属性,你可以随自己喜好另外定义,接着包含在expression()里的语句就是JS脚本,在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非s cript内。OK,这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改,你可能想当然的会认为应该写为

<style type="text/css">
input
{star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<style type="text/css">
input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">

  可结果却是出现脚本出错,正确的写法应该把CSS样式的定义写进函数内,如下所示:

<style type="text/css">
input {star : expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text">

  注意

  不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高

=======================================================================

利用css里expression来实现界面对象的批量控制

问题说明: 用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
解决方法: 使用css的expression方法,
具体实现要看看.css的写法:
/*替换图片CSS*/
#imgScript {      /*这里使用对象ID来通配样式, 也可以定义一个css函数*/
star:expression(
onmouseover = function()
{
/*替换图片*/
if(this.hover != null){
this.name = this.src;
this.src = this.src.replace(’.jpg’, ’_over.jpg’);
this.HasChg = 1;
}
},
onmouseout = function()
{
/*还原本来的图片*/
if(this.HasChg != null){
this.src = this.name;
this.HasChg = null;
}
}
)
}/*end imgScript*/
应用样式的img:
<img src="a.jpg">
请将鼠标放在a.jpg上看看效果

=======================================================================

可以把JavaScript代码,写在css里吗?

没有做不到的,只有想不到的!我们可以先写好JS代码,然后再在CSS中调用它即可:

  首先写JS(javascritp):

<script language="javascript">  
    
//定义table的样式.cellSpacing,cellPadding   
//borderColorLight       ,borderColorDark.   
    
function       table3d(obj)       {   
      obj.border=1;   
      obj.cellSpacing=0;   
      obj.cellPadding=0;      
      obj.borderColorLight="#ffffff";   
      obj.borderColorDark="#ffffff";   
}
    
//定义td的样式.       bgColor   
//borderColorLight,       borderColorDark   
    
function       td3d(obj)       {   
      obj.bgColor="#0000ff";   
      obj.borderColorLight="#ffffff";   
      obj.borderColorDark="#eeeeee";   
}   
</script>   

  再写样式表:
    
<style>   
<!--定义样式-->   
.table3d{wwwfan:expression(table3d(this))}   
.td3d{wwwfan:expression(td3d(this))}   
</style>

  在表格中应用样式:

<table class=table3d> <!--应用table3d样式-->
<tr align="center">
<td width="100" class=td3d>立体</td> <!--应用td3d样式-->
<td width="100" class=td3d>表格</td> <!--应用td3d样式-->
</tr>
</table>

  说明:

  .table3d{wwwfan:expression(table3d(this))}

  .table3d 定义一个class,不用我再罗嗦了吧!
wwwfan 是自已定义的属性,可以用你的英文名任意取个名字!因为这是你自己的CSS啊!
expression()里面的语句就是JavaScript. 一定很熟悉吧!
table3d(this). 调用了前面写的函数。这个函数很简单,只是包含了对borderColorLight、borderColorDark、cellSpacing等的定义。

===============================================

--------------------表格隔行换色一----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行换色二</title>
<style type="text/css">
<!--
tr {
background-color:expression((this.sectionRowIndex%2==0)?"red":"blue");
}
-->
</style>
</head>
<body>
</HEAD>
<table>
<tr>
<td>第1行</td><td>第1行</td>
</tr>
<tr>
<td>第2行</td><td>第2行</td>
</tr>
<tr>
<td>第3行</td><td>第3行</td>
</tr>
<tr>
<td>第4行</td><td>第4行</td>
</tr>
<tr>
<td>第5行</td><td>第5行</td>
</tr>
</table>
</body>
</html>

--------------------表格隔行换色二----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行换色一</title>
<style type="text/css">
<!--
.DoubleColorTable tr {
background-color:expression("#F1F8FF,#ffffff".split(",")[rowIndex%2])
}
-->
</style>
</head>

<body>
<table border="1" cellpadding="0" cellspacing="0" bordercolorlight="#6C7BA6" bordercolordark="#ffffff" bgcolor="#DEEFFF" class="DoubleColorTable">
    <tr>
      <td>123456789</td>
      <td>45873123456</td>
      <td>4587312345</td>
      <td>4587312345</td>
      <td>4587312345</td>
    </tr>
    <tr>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;123456789456123348</td>
      <td>&nbsp;23456789</td>
    </tr>
    <tr>
      <td>&nbsp;123456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
    </tr>
    <tr>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
    </tr>
    <tr>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
      <td>&nbsp;23456789</td>
    </tr>
</table>
</body>
</html>

--------------------表格隔行换色三----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>   
.db tr{   
background-color:expression('#000000,#333333,#555555,#777777,#999999,#bbbbbb,#dddddd,#ffffff'.split(',')[rowIndex%8]);   
}   
</style>
<title>表格隔行换色三</title>
</head>

<body>  
<table width="100%" border="1" class="db">   
<tr>   
<td>aaaaaaaaaaaaaa</td>   
</tr>   
<tr>   
<td>bbbbbbbbbbbbbbb</td>   
</tr>   
<tr>   
<td>cccccccccccc</td>   
</tr>   
<tr>   
<td>fffffffffffff</td>   
</tr>   
</table>   
    
上面是每一行隔行换色每两行一循环,下面是每一行隔行换色,每八行一循环   
</body>
</html>

--------------------表格隔行换色四----------------------------


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行换色四</title>
<style type="text/css" media="screen">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
.t1 {background-color:#fff;}/* 第一行的背景色 */
.t2 {background-color:#eee;}/* 第二行的背景色 */
.t3 {background-color:#ccc;}/* 鼠标经过时的背景色 */
-->
</style>
</head>
<body>
<ul><li>11111111</li>
<li>222222222</li>
<li>3333333</li>
<li>444444444</li>
</ul>
<script type="text/javascript">
<!--
var Ptr=document.getElementsByTagName("li");
function $() {
      for (i=1;i<Ptr.length+1;i++) {
      Ptr[i-1].className = (i%2>0)?"t1":"t2";
      }
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
      Ptr[i].onmouseover=function(){
      this.tmpClass=this.className;
      this.className = "t3";
    
      };
      Ptr[i].onmouseout=function(){
      this.className=this.tmpClass;
      };
}
//-->
</script>
</body>
</html>

分享到:
评论

相关推荐

    CSS expression 隔行换色效果

    方法一是用CSS控制每一行的LI属性,如 &lt;ul&gt; &lt;li class=one&gt;&lt;/li&gt; &lt;li class=two&gt;&lt;/li&gt; &lt;li class=one&gt;&lt;/li&gt; &lt;li class=two&gt;&lt;/li&gt; &lt;/ul&gt; 然后在CSS文件里定义class属性就可以了。但是假如调用在程序里就不是很合适...

    jQuery完全实例.rar

    如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。 参考 Selectors 获取更多用于 expression 参数的 CSS 语法的信息。 ----------------------------------------------...

    asp.net知识库

    在ASP.Net中两种利用CSS实现多界面的方法 如何在客户端调用服务端代码 页面一postback,它就显示页面的最顶端,怎样让它定位在某一位置? 如何保证页面刷新后的滚动条位置 清除网页历史记录,屏蔽后退按钮! 如何传值...

    ASP.NET 3.5 开发大全11-15

    12.1.4 将CSS应用在控件上 12.1.5 主题和皮肤 12.1.6 页面主题和全局主题 12.1.7 应用和禁用主题 12.1.8 用编程的方法控制主题 12.2 母版页 12.2.1 母版页基础 12.2.2 内容窗体 12.2.3 母版页的运行方法 12.2.4 嵌套...

    ASP.NET 3.5 开发大全1-5

    12.1.4 将CSS应用在控件上 12.1.5 主题和皮肤 12.1.6 页面主题和全局主题 12.1.7 应用和禁用主题 12.1.8 用编程的方法控制主题 12.2 母版页 12.2.1 母版页基础 12.2.2 内容窗体 12.2.3 母版页的运行方法 12.2.4 嵌套...

    在CSS里写复杂的JavaScript脚本

    是一个问题,经测试,可以先定义一个函数,然后在expression里调用就行了,不过由于在CSS里用了expression,所以,只能在IE里运行. 一下是示例,点击代码可运行. Untitled Document .aa { height:100px; width:...

    ASP.NET3.5从入门到精通

    12.3.1 Microsoft Expression 2 简介 12.3.2 安装Microsoft Expression 2 12.4 使用Microsoft Expression Web 2 制作页面 12.4.1 创建ASPX 页面 12.4.2 创建CSS 层叠样式表 12.4.3 创建框架集 12.5 小结 第 13 章 ...

    ASP.NET 3.5 开发大全word课件

    这是整部学习资料 由于太大第一章免费供应给大家 在我的上传资源中 如果觉得还不过希望大家给个好评 当然具体本书的作者就不深究了把! 第1章 认识ASP.NET 3.5 1.1 什么是ASP.NET 1.1.1 .NET历史与展望 1.1.2 ASP...

    ASPNET35开发大全第一章

    12.1.4 将CSS应用在控件上 12.1.5 主题和皮肤 12.1.6 页面主题和全局主题 12.1.7 应用和禁用主题 12.1.8 用编程的方法控制主题 12.2 母版页 12.2.1 母版页基础 12.2.2 内容窗体 12.2.3 母版页的运行方法 12.2.4 嵌套...

    ASP.NET 3.5 开发大全

    12.1.4 将CSS应用在控件上 12.1.5 主题和皮肤 12.1.6 页面主题和全局主题 12.1.7 应用和禁用主题 12.1.8 用编程的方法控制主题 12.2 母版页 12.2.1 母版页基础 12.2.2 内容窗体 12.2.3 母版页的运行方法 12.2.4 嵌套...

    J2EE应用开发详解

    76 5.5.2 JavaBean动作 78 5.6 隐式对象 78 5.6.1 request对象 78 5.6.2 response对象 78 5.6.3 application对象 78 5.6.4 out对象 79 5.6.5 page对象 79 5.6.6 session对象 79 5.6.7 exception对象 80 5.6.8 ...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    6.2.2 在视图状态中保存对象 6.2.3 视图状态评估 6.2.4 有选择地禁用视图状态 6.2.5 视图状态安全 6.3 在页面间传送信息 6.3.1 查询字符串 6.3.2 跨页回发 6.4 cookie 6.5 会话状态 6.5.1 会话...

    CodeIgniter:php敏捷开发框架web快速开发详解

    同样的,框架是为重用而发明的,存放在独立的文件中,用来简化重复操作的代码。 上面例子中连接数据库和编写 HTML 表单元素的工作都可以调用相关的 CI 函数来进行简化。 它超越了这一点。有很多种方法实现同样的...

    ASP.NET4高级程序设计(第4版) 3/3

    6.2.2 在视图状态中保存对象 181 6.2.3 视图状态评估 183 6.2.4 有选择地禁用视图状态 184 6.2.5 视图状态安全 185 6.3 在页面间传送信息 186 6.3.1 查询字符串 187 6.3.2 跨页回发 188 6.4 cookie ...

    landesverraeter_in:[已停产] WordPress插件,用于新闻自由和与Netzpolitik.org的团结

    IBAN:DE62430609671149278400 目的:捐赠给netzpolitik.org描述将静态HTML页面添加到WordPress网站上任何URL的首次调用中(看起来像上面的屏幕截图,inc / index.php中CSS样式内联)。 设置了cookie,以防止在下次...

Global site tag (gtag.js) - Google Analytics