JS“隔行换色” v1.0 by caikanxp @2008-1-23
2008-01-23 14:23
330 查看
运行代码(R) 我无语了，这blog输出页面时会擅自删除它认为“多余的”换行符，本来想加个同时兼容IE和FF的按钮弹出演示页面的，还是不成……
<!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>
<title>JS“隔行换色” v1.0 by caikanxp @2008-1-23</title>
<meta name="generator" content="editplus" />
<meta name="author" content="caikanxp" />
</head>
<body>
<script type="text/javascript" id="script">
<!--
/**
* JS“隔行换色” v1.0 by caikanxp @2008-1-23
* 可对ul、ol列表项及表格行进行隔行设定不同的元素属性，
* 也可对某个的元素所有子元素重复间隔地设定不同属性。
* 用法：
* interlaceStyle(o, s1[, s2[, ...[, sN]]]);
* @param o
* 要设定属性的所有元素的父元素，如ul、ol、table、及其它用户自定义的元素；
* 可以为字符串，此时函数会以此字符串作为id查找相应的父元素。
* @param s1,s2,...,sN
* 要设定的背景色字符串；或是CSS样式字符串；或是元素处理回调函数，此函数将被传入将被处理的元素作为参数。
*/
function interlaceStyle(o) {
// 如果o是字符串，则转换为对应id的元素，并且元素有效时继续执行
if (o = typeof o == 'string' ? document.getElementById(o) : o) {
var items; // 用于引用保存符合条件元素的数组，或引用对应的HTML元素集合
if (/^(ol|ul)$/i.test(o.tagName)) {
// 当元素是ol或ul列表时，查找符合条件的列表项并保存至items数组
items = [];
var c = o.firstChild;
while (c) {
// 过滤非li元素及文本节点
if (/^li$/i.test(c.tagName)) {
items.push(c);
}
c = c.nextSibling;
}
} else if (/^(table|thead|tbody|tfoot)$/i.test(o.tagName)) {
// 当元素是表格（头/体/脚）时，让items直接引用其tr行元素集合
items = o.rows;
} else {
// 其它情况下查找所有的直接子元素保存至items数组
items = [];
var c = o.firstChild;
while (c) {
// 过滤掉非元素节点
if (c.nodeType == 1) {
items.push(c)
}
c = c.nextSibling;
}
}
// 对符合条件的元素重复间隔地修改属性
for( var i = 0; i < items.length; i++){
var arg = arguments[i % (arguments.length - 1) + 1];
if (typeof arg == 'function') {
// 若属性参数是一个function，则调用它，并传入当前元素作为参数
arg(items[i]);
} else if (/:/.test(arg)) {
// 若属性字符串含有冒号，则当作CSS样式字符串处理
items[i].style.cssText = arg;
} else if (arg) {
// 如果是其它情况并且参数有效，则当作背景色处理（特殊对待啊^^）
items[i].style.backgroundColor = arg;
}
}
}
}
// 测试范例，IE6，FF2中测试通过
window.onload = function(event) {
// ul列表隔行设背景色
interlaceStyle('unordered', '#FFCCCC', '#CCFFFF');
// ol列表设3种隔行背景色
interlaceStyle('ordered', 'orange', 'tomato', 'orchid');
// 自定义对某元素的所有子元素间隔设定样式
interlaceStyle('other',
'color: buttontext; background-color: buttonface; border: buttonface 5px outset;',
'color: buttontext; background-color: buttonface; border: buttonface 5px inset;'
);
// 表格隔行通过回调函数设定属性，其中每行再对单元格设属性
interlaceStyle('table',
function(e) {
e.style.color = 'yellow';
interlaceStyle(e, 'red', 'green', 'blue');
},
function(e) {
e.style.backgroundColor = 'wheat';
interlaceStyle(e, 'color: red;', 'color: green;', 'color: blue;');
}
);
// 在文档尾部添加显示此脚本代码
with(document.body.appendChild(document.createElement('pre'))) {
style.cssText = 'background: #ddd; border: black 1px solid; padding: 1em; font-size: 12px;';
innerHTML = ' ';
firstChild.data = document.getElementById('script').innerHTML;
}
}
//-->
</script>
<ul id="unordered">
<li>unorderd list item</li>
<li>unorderd list item</li>
<li>unorderd list item</li>
<li>unorderd list item</li>
<li>unorderd list item</li>
<li>unorderd list item</li>
</ul>
<ol id="ordered">
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
</ol>
<div id="other">
<div>userdefined element</div>
<div>userdefined element</div>
<div>userdefined element</div>
<div>userdefined element</div>
<div>userdefined element</div>
<div>userdefined element</div>
</div>
<table id="table">
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</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>
<title>JS“隔行换色” v1.0 by caikanxp @2008-1-23</title>
<meta name="generator" content="editplus" />
<meta name="author" content="caikanxp" />
</head>
<body>
<script type="text/javascript" id="script">
<!--
/**
* JS“隔行换色” v1.0 by caikanxp @2008-1-23
* 可对ul、ol列表项及表格行进行隔行设定不同的元素属性，
* 也可对某个的元素所有子元素重复间隔地设定不同属性。
* 用法：
* interlaceStyle(o, s1[, s2[, ...[, sN]]]);
* @param o
* 要设定属性的所有元素的父元素，如ul、ol、table、及其它用户自定义的元素；
* 可以为字符串，此时函数会以此字符串作为id查找相应的父元素。
* @param s1,s2,...,sN
* 要设定的背景色字符串；或是CSS样式字符串；或是元素处理回调函数，此函数将被传入将被处理的元素作为参数。
*/
function interlaceStyle(o) {
// 如果o是字符串，则转换为对应id的元素，并且元素有效时继续执行
if (o = typeof o == 'string' ? document.getElementById(o) : o) {
var items; // 用于引用保存符合条件元素的数组，或引用对应的HTML元素集合
if (/^(ol|ul)$/i.test(o.tagName)) {
// 当元素是ol或ul列表时，查找符合条件的列表项并保存至items数组
items = [];
var c = o.firstChild;
while (c) {
// 过滤非li元素及文本节点
if (/^li$/i.test(c.tagName)) {
items.push(c);
}
c = c.nextSibling;
}
} else if (/^(table|thead|tbody|tfoot)$/i.test(o.tagName)) {
// 当元素是表格（头/体/脚）时，让items直接引用其tr行元素集合
items = o.rows;
} else {
// 其它情况下查找所有的直接子元素保存至items数组
items = [];
var c = o.firstChild;
while (c) {
// 过滤掉非元素节点
if (c.nodeType == 1) {
items.push(c)
}
c = c.nextSibling;
}
}
// 对符合条件的元素重复间隔地修改属性
for( var i = 0; i < items.length; i++){
var arg = arguments[i % (arguments.length - 1) + 1];
if (typeof arg == 'function') {
// 若属性参数是一个function，则调用它，并传入当前元素作为参数
arg(items[i]);
} else if (/:/.test(arg)) {
// 若属性字符串含有冒号，则当作CSS样式字符串处理
items[i].style.cssText = arg;
} else if (arg) {
// 如果是其它情况并且参数有效，则当作背景色处理（特殊对待啊^^）
items[i].style.backgroundColor = arg;
}
}
}
}
// 测试范例，IE6，FF2中测试通过
window.onload = function(event) {
// ul列表隔行设背景色
interlaceStyle('unordered', '#FFCCCC', '#CCFFFF');
// ol列表设3种隔行背景色
interlaceStyle('ordered', 'orange', 'tomato', 'orchid');
// 自定义对某元素的所有子元素间隔设定样式
interlaceStyle('other',
'color: buttontext; background-color: buttonface; border: buttonface 5px outset;',
'color: buttontext; background-color: buttonface; border: buttonface 5px inset;'
);
// 表格隔行通过回调函数设定属性，其中每行再对单元格设属性
interlaceStyle('table',
function(e) {
e.style.color = 'yellow';
interlaceStyle(e, 'red', 'green', 'blue');
},
function(e) {
e.style.backgroundColor = 'wheat';
interlaceStyle(e, 'color: red;', 'color: green;', 'color: blue;');
}
);
// 在文档尾部添加显示此脚本代码
with(document.body.appendChild(document.createElement('pre'))) {
style.cssText = 'background: #ddd; border: black 1px solid; padding: 1em; font-size: 12px;';
innerHTML = ' ';
firstChild.data = document.getElementById('script').innerHTML;
}
}
//-->
</script>
<ul id="unordered">
<li>unorderd list item</li>
<li>unorderd list item</li>
<li>unorderd list item</li>
<li>unorderd list item</li>
<li>unorderd list item</li>
<li>unorderd list item</li>
</ul>
<ol id="ordered">
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
</ol>
<div id="other">
<div>userdefined element</div>
<div>userdefined element</div>
<div>userdefined element</div>
<div>userdefined element</div>
<div>userdefined element</div>
<div>userdefined element</div>
</div>
<table id="table">
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
<tr><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td><td>table cell</td></tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- SEHLoger v 1.0 by mr. seeQ
- 【js：class属性】——自定义function：getElementsByClassName
- JS整理,getCookie, getElementsByClassName , 添加删除事件
- webpack + vuejs（都是1.0的版本） 基本配置（一）
- 非常好的JS入门整理 (Step by step）
- js_document有关getElementsByName 定义和用法
- 一个简单的仿xp的js下拉菜单
- Creating corner with different angle by using css and js
- js使用 soapclient.js 访问webservice遇到问题" field SOAPAction is not allowed by Access-Control"
- JS整理,getCookie, getElementsByClassName , 添加删除事件
- Vue.js的学习1.0
- 手把手教你玩转SOCKET模型之重叠I/O篇 by PiggyXP【小猪】
- JS实现隔行变色及鼠标滑过变色
- js之表格隔行换色
- Android WebView使用详解包括js互调（by 星空武哥）
- js 实现隔行变色
- 监听浏览器使用不同版本js并且处理ie兼容getElementByClassName
- A Security Problem Caused by xp_cmdshell in SQL Server.