把JavaScript代码写在css里
<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> </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怎样实现这个目的。
转载于:https://www.cnblogs.com/netcorner/archive/2006/12/29/2912453.html
把JavaScript代码写在css里相关推荐
- 60行JavaScript代码写俄罗斯方块
教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏 早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要 ...
- [html] 说说js代码写到html里还是单独写到js文件里哪个好?为什么?
[html] 说说js代码写到html里还是单独写到js文件里哪个好?为什么? js和html还是分开比较好,一是各功能独立,界面比较干净,二是方便管理,关系清晰,三是方便引用,一些公共js独立导入可 ...
- 【用JavaScript代码写“蝴蝶飞舞“】
用JavaScript代码写"蝴蝶飞舞" 连贯的动态图片都可以用这个方法 <head> <script type="text/javascript&qu ...
- html和js画圣诞树图片,教你如何把JavaScript代码写成圣诞树
我们使用了自己写的一个nodejs库,如果您要实现这样的效果,只需要按照下面第一章节的方法即可.当然您也可以在线压缩代码: 下面分两章节,分别讲解如何使用js2image这个库 和 js2image这 ...
- y空间兑换代码_如何用不到 2KB 的 JavaScript 代码写一个 3D 赛车游戏?
几个月前,JS1k游戏制作节(JS1K game jam)传出不再举办消息后,许多游戏迷开始哀嚎. Frank Force 也是其中一位,但他还有另一层身份--一位德克萨斯州奥斯汀的独立游戏设计师.F ...
- Cloud for Customer里UI5 JavaScript代码和UI designer里模型的对应关系
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
- jS代码写在html什么位置,3种JavaScript代码书写位置和注意事项
在网页中编写JavaScript代码时,有3种书写位置,分别是行内式.内嵌式(也称为嵌入式)和外部式(也称为外链式),下面分别进行讲解. 1. 行内式 行内式是指将单行或少量的JavaScript代码 ...
- 添加javascript代码:_JavaScript(1)
一.JavaScript组成 1.ECMAScript:是ECMA制定的脚本语言的语法标准,基础语法的规范,为了让不同的浏览器都可以运行通过标准运行出来的代码. 2.文档对象模型(DOM):JavaS ...
- JavaScript 代码教程
JavaScript 是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器中的一部分,广泛用于客户端的脚本语言,最早是在HTM ...
最新文章
- 安卓环境搭建 unable to access Android SDK add-on list解决方案
- python3 多进程库 multiprocessing 使用简介
- LTP 4.0!单模型完成6项自然语言处理任务
- ae中心点重置工具_AE脚本:锚点中心点移动对齐脚本 Move Anchor Point 3
- MYSQL数据库导入出错:#1046 - No database selected
- 构建springmvc+mybatis+dubbo分布式平台-dubbo简介
- php变量在哪定义,PHP变量定义及工作原理
- linux 常见路径,linux中目录与路径常见相关命令
- 用计算机弹假面骑士build,假面骑士build使用的武器汇总,你知道几个?
- sap crystal reports(水晶报表) 2016 SP7中文破解版
- selenium万能选择器
- 【FPGA频率计】基于FPGA的高精度数字频率计的详细设计
- Ubuntu16.04快速安装搜狗拼音输入法
- python儿童编程入门-一款儿童编程入门的理想工具——PythonTurtle
- python实现不重复排列组合_python 实现排列组合
- 鸡啄米:C++编程入门系列之目录和总结http://www.jizhuomi.com/software/129.html
- 超级好用的配色工具Palettte
- 5.1.2全景声音箱摆位_客厅影院选择7.1还是5.1.2全景声合适,天空音箱点位怎么定...
- C++ 数组作为参数传入函数 int sum_arr(int arr[], int n)
- 8人Python-----day02