掲示板/JavaScript質問板/過去ログ/一覧/ リストを縞模様に

0 名前： trifler ： 2006/12/12（火） 13:40 ID:BLDxYfw8: WORLD ENDINGさんというブログに、
ZEBRA EFECTというリストを縞模様にするスクリプトを紹介されていました。
→http://blog.worldending.jp/archives/2006/07/zebla_effect.php
特定のidに含まれるタグに適用されるとのことですが、
特定のidではなく、すべてのulにしたいと思っています。

function zebra(idName,tagName,addClassName) {
if (!document.getElementById(idName)) { return false; }

var zebraRows = document.getElementById(idName).getElementsByTagName(tagName);

for (var i=0; i<zebraRows.length; i++) {
if (i%2) {
zebraRows[i].className = addClassName;
}
}
}

これがもとのスクリプトです。

ByIdをByTagNameにしてみたりしたのですがうまくいきません。
（知識なしです）

簡単なことかもしれませんが、よろしくお願いします。

1 名前： trifler ： 2006/12/12（火） 13:40 ID:BLDxYfw8: すみません、ZEBRA EFFECTです。

2 名前： Script41 ： 2006/12/12（火） 13:40 ID:A3n49R0s

力技で処理すると、こんな感じでしょうか。

<script type="text/javascript">
<!--
bgCol  = new Array()
bgCol[0] = "#ffffcc";
bgCol[1] = "#ffccff";
oldCol   = "";
function ulBgColor(){
	obj = document.getElementsByTagName('UL');
	i = 0;
	while(obj[i]){
		cld = obj[i].childNodes;
		j = 0;
		while(cld[j]){
			k = j % (bgCol.length);
			if(cld[j].tagName == 'LI'){
				if(oldCol == bgCol[k]){
					k = (j+1) % (bgCol.length);
				}
				cld[j].style.backgroundColor = bgCol[k];
				oldCol = bgCol[k];
			}
			j++;
		}
		i++;
	}
}
window.onload = ulBgColor;
//-->
</script>

※実際に使ってみると、リストマークの部分には背景色が付かないので、サイトのコンテンツに利用するには、もう一工夫が必要でしょうね。
例えば、リストマークを非表示にして、代わりにLI内に画像を挿入する等・・・。

3 名前： trifler ： 2006/12/12（火） 13:40 ID:BLDxYfw8: スクリプトを使わせて頂きました。
CSSはそれなりにかけるので、これで十分満足です。
丁寧にありがとうございました。