< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

<script>   
    
//定义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="#B7B7B7";   
obj.borderColorLight="#000000";   
obj.borderColorDark="#EEEEEE";   
}   
</script>   
    
<style>   
<!--定义样式-->   
.table3d{baobao:expression_r(table3d(this))}   
.td3d{baobao:expression_r(td3d(this))}   
</style>
<table width="200" border="0" class="td3d">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
expression这个命令上面,它可以让用户编写自定义的style class当然也就可以结合javascript来动态设定style class的样式。再举个例子,比如:
这里我们有一个表格,当mouse over在每一个行上的时候,行的背景色就变成灰色,移出来的时候就变回白色。一般的办法是像下面这样处理。

引用

<table border="1">
   <tr οnmοuseοver="this.style.backgroundColor:#eeeeee" οnmοuseοut="this.style.backgroundColor:#ffffff"><td>1</td></tr>
<tr οnmοuseοver="this.style.backgroundColor:#eeeeee" οnmοuseοut="this.style.backgroundColor:#ffffff"><td>1</td></tr>
<tr οnmοuseοver="this.style.backgroundColor:#eeeeee" οnmοuseοut="this.style.backgroundColor:#ffffff"><td>1</td></tr>
</table>

效果是实现了,但如果表格的行数太多的话,你就不得不COPY AND PASTE了。虽然都是重复性动作不碍事,但其实是一个无可耐何的办法。来,这次我们用expression来改进一去。把代码改一下,像这样。

引用

<style>
tr{background-color:expression_r(οnmοuseοver=function() {this.style.backgroundColor="#eeeeee"}, οnmοuseοut=function(){this.style.backgroundColor="#FFFFFF"})}
</style>
<table border="1">
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
</table>

放在IE上面跑看看,效果是一样的喔,这样就省了不少时间来copy and paste了。

要注意的是,如果动态给属性赋值的话,这些语句要通过一个函数来包装。另外,如果只是想让那些拥有这个style class的元素执行一些javascript的话,这里的background-color可以是自定义的属性。

好,下面再来一个实例,看看如何动态设定元素的样式。

在一个表格中经常用到的就是把偶数行与奇数行区分出来,以帮助用户易于查看这些数据。好吧,来看看用expression怎样实现这个目的。

#javascript/ajax专栏

转载于:https://www.cnblogs.com/netcorner/archive/2006/12/29/2912453.html

把JavaScript代码写在css里相关推荐

  1. 60行JavaScript代码写俄罗斯方块

    教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏 早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要 ...

  2. [html] 说说js代码写到html里还是单独写到js文件里哪个好?为什么?

    [html] 说说js代码写到html里还是单独写到js文件里哪个好?为什么? js和html还是分开比较好,一是各功能独立,界面比较干净,二是方便管理,关系清晰,三是方便引用,一些公共js独立导入可 ...

  3. 【用JavaScript代码写“蝴蝶飞舞“】

    用JavaScript代码写"蝴蝶飞舞" 连贯的动态图片都可以用这个方法 <head> <script type="text/javascript&qu ...

  4. html和js画圣诞树图片,教你如何把JavaScript代码写成圣诞树

    我们使用了自己写的一个nodejs库,如果您要实现这样的效果,只需要按照下面第一章节的方法即可.当然您也可以在线压缩代码: 下面分两章节,分别讲解如何使用js2image这个库 和 js2image这 ...

  5. y空间兑换代码_如何用不到 2KB 的 JavaScript 代码写一个 3D 赛车游戏?

    几个月前,JS1k游戏制作节(JS1K game jam)传出不再举办消息后,许多游戏迷开始哀嚎. Frank Force 也是其中一位,但他还有另一层身份--一位德克萨斯州奥斯汀的独立游戏设计师.F ...

  6. Cloud for Customer里UI5 JavaScript代码和UI designer里模型的对应关系

    要获取更多Jerry的原创文章,请关注公众号"汪子熙":

  7. jS代码写在html什么位置,3种JavaScript代码书写位置和注意事项

    在网页中编写JavaScript代码时,有3种书写位置,分别是行内式.内嵌式(也称为嵌入式)和外部式(也称为外链式),下面分别进行讲解. 1. 行内式 行内式是指将单行或少量的JavaScript代码 ...

  8. 添加javascript代码:_JavaScript(1)

    一.JavaScript组成 1.ECMAScript:是ECMA制定的脚本语言的语法标准,基础语法的规范,为了让不同的浏览器都可以运行通过标准运行出来的代码. 2.文档对象模型(DOM):JavaS ...

  9. JavaScript 代码教程

    JavaScript 是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器中的一部分,广泛用于客户端的脚本语言,最早是在HTM ...

最新文章

  1. 安卓环境搭建 unable to access Android SDK add-on list解决方案
  2. python3 多进程库 multiprocessing 使用简介
  3. LTP 4.0!单模型完成6项自然语言处理任务
  4. ae中心点重置工具_AE脚本:锚点中心点移动对齐脚本 Move Anchor Point 3
  5. MYSQL数据库导入出错:#1046 - No database selected
  6. 构建springmvc+mybatis+dubbo分布式平台-dubbo简介
  7. php变量在哪定义,PHP变量定义及工作原理
  8. linux 常见路径,linux中目录与路径常见相关命令
  9. 用计算机弹假面骑士build,假面骑士build使用的武器汇总,你知道几个?
  10. sap crystal reports(水晶报表) 2016 SP7中文破解版
  11. selenium万能选择器
  12. 【FPGA频率计】基于FPGA的高精度数字频率计的详细设计
  13. Ubuntu16.04快速安装搜狗拼音输入法
  14. python儿童编程入门-一款儿童编程入门的理想工具——PythonTurtle
  15. python实现不重复排列组合_python 实现排列组合
  16. 鸡啄米:C++编程入门系列之目录和总结http://www.jizhuomi.com/software/129.html
  17. 超级好用的配色工具Palettte
  18. 5.1.2全景声音箱摆位_客厅影院选择7.1还是5.1.2全景声合适,天空音箱点位怎么定...
  19. C++ 数组作为参数传入函数 int sum_arr(int arr[], int n)
  20. 8人Python-----day02

热门文章

  1. 彻底吃透Web服务器、容器、应用程序服务器与反向代理
  2. 不可逆的类初始化过程
  3. 这 30 个常用的 Maven 命令你必须熟悉!
  4. Linux基础——linux和gcc的介绍
  5. spring boot应用启动原理分析
  6. RESTful Web 服务 - 方法
  7. Spring Cloud构建微服务架构(二)服务消费者
  8. tls 禁用重协商_SSL/TLS高危不安全重新协商漏洞
  9. 模块化是数据中心设计的未来
  10. 洪水填充算法_基于GIS的洪水淹没范围计算