这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现的样式切换功能 tableCSS, 结合实例形式分析了 js 页面元素遍历与样式动态操作相关技巧, 需要的朋友可以参考下
本文实例分析了 JS 实现的样式切换功能 tableCSS。分享给大家供大家参考,具体如下:
把前阵子写的 JQ 插件函数 (alterBgColor) 改写成不基于 JQ 的代码, 还添加了一个 click 样式效果
代码风格还是按照 JQ 插件风格来写, 使用了闭包来循环设置 TR 元素的样式
- function TableCss(options) {
- //如果没参数,就退出
- if (arguments.length < 1 || !document.getElementById(options.tableName)) {
- return;
- }
- //参数及默认参数
- var options = {
- tableName: options.tableName,
- evenClass: options.evenClass || "tr_even",
- oddClass: options.oddClass || "tr_odd",
- clickClass: options.clickClass || "tr_click",
- hoverClass: options.hoverClass || "tr_hover"
- }
- //根据ID找到表格元素
- var tableName = document.getElementById(options.tableName);
- var tr = tableName.getElementsByTagName("tr");
- //对TR元素循环设置
- for (var i = 0,
- len = tr.length; i < len; i++) {
- //用了闭包
- (function(k) {
- //设置奇偶行样式
- tr[k].className = (k % 2 == 0) ? options.oddClass: options.evenClass;
- //点击样式
- tr[k].onclick = function() {
- if (tr[k].className == options.clickClass) {
- tr[k].className = (k % 2 == 0) ? options.oddClass: options.evenClass;
- } else {
- tr[k].className = options.clickClass;
- }
- }
- //鼠标HOVER样式,如果已经是点击样式,则不变化
- tr[k].onmouseover = function() {
- if (tr[k].className == options.clickClass) {
- return false;
- } else {
- tr[k].className = options.hoverClass;
- }
- }
- tr[k].onmouseout = function() {
- if (tr[k].className == options.clickClass) {
- return false;
- } else {
- tr[k].className = (k % 2 == 0) ? options.oddClass: options.evenClass;
- }
- }
- })(i)
- }
- }
- //调用
- TableCss({
- tableName: "tb1"
- });
效果很简单, 代码也很简单.
只是这句 tr[k].className = (k%2==0)? options.oddClass : options.evenClass; 写了三遍, 本来是写在一个 function 里的, 但不知道在闭包里那么写会不会影响性能 (任务管理器里也没看到有 CPU 使用率暴涨的情况), 最后还是决定这么写, 呵呵.
测试代码:
- <style>
- <!-- #tb1, #tb1 td{ border:1px solid #000;border-collapse:collapse} .tr_even
- { background:#CCC;} .tr_odd { background:#9FF;} .tr_hover { background:#FF6;}
- .tr_click { background:#00F;} -->
- </style>
- <table id="tb1" cellpadding="1" cellspacing="1">
- <tr>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- </tr>
- <tr>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- </tr>
- <tr>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- </tr>
- <tr>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- <td>
- 123
- </td>
- <td>
- 456
- </td>
- </tr>
- </table>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0603/329006.html