- 締切済み
背景色をAB,ACというように設定するには
お世話になります <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>index03のページ</title> <style type="text/css"> body { background-color: #FFFFCE; background-image: url(); } .list01-odd { background-color: #FFCCFF; } .list01-even{ background-color: #EEFFEE; } .list02-odd { background-color: #FFD5AA; } .list02-even{ background-color: #EEFFEE; } a {color: #cc6600 } ul,li {padding:0; margin:0; line-height:1.3; font-size: 14px; font-weight: italic; } li a {text-decoration: none;} .blockAA {width:740px; background:#FFFCCC;} .blockAA ul {width:740px;} .blockAA ul li {float:left; width:340px; list-style:none; padding-left:30px; } .unnamed1 { font-size: 16px; color: #FF0000; font-style: italic; font-weight: normal; } .style153 {font-size: 16px; color: #9CCE39; font-weight: bold; } .style132 /* clearfix */ .blockAA ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> <script type="text/javascript"> window.onload=function(){ var ul_elms =document.getElementsByTagName("UL"); for(var i=0;i<ul_elms.length;i++){ if(ul_elms[i].className =="hoge1"){ var count=0; var elment=ul_elms[i].firstChild; while(elment){ if(elment.tagName=="LI"){ if(count>1){ elment.className ="list01-evn"; count=(count>2)?0:3; }else{ elment.className ="list01-odd"; count++; } } elment=elment.nextSibling; } } } } window.onload=function(){ var ul_elms =document.getElementsByTagName("UL"); for(var i=0;i<ul_elms.length;i++){ if(ul_elms[i].className =="hoge2"){ var count=0; var elment=ul_elms[i].firstChild; while(elment){ if(elment.tagName=="LI"){ if(count>1){ elment.className ="list02-evn"; count=(count>2)?0:3; }else{ elment.className ="list02-odd"; count++; } } elment=elment.nextSibling; } } } } </script> </head> わかりにくくてすみません。 list01,list02と、違う色の組み合わせで背景色を交互につけたいのですが、このやり方ではうまくいきません。 （例 list01では白、ピンク、list02では白、茶色というように） いい方法をご教授願えないでしょうか。 よろしくお願いします。
- yamyamya-m
- お礼率49% (78/158)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
さきをこされちまった～。 でっ、びっとえんざんしてます window.onload = function () { li_class_set( "list01", "list01-evn", "list01-odd"); li_class_set( "list02", "list02-evn", "list02-odd"); } function li_class_set( ulId, evn_class, odd_class ) { var i = 0, l, li = document.getElementById( ulId ).getElementsByTagName( 'LI' ); while( l = li[ i ] ) l.className = (i++ & 2) == 0 ? odd_class: evn_class }
- yuu_x
- ベストアンサー率52% (106/202)
・onload に繰り返し書き込むと、そのたびに上書きされていき、最後に代入されたものだけが実行されます。(その他イベントも同様） ・if(count>1)、count=(count>2)?0:3; count は 0, 1, 2 と繰り返され、0, 1 のときに odd, 2 のときに even となる。 書くなら、 if(count>1) → if( count > 0 ) count=(count>2)?0:3; → count=0; 複雑なことしなくても if( count % 2 == 0 ) // 偶数 else // 奇数 count ++; で十分 ------------------------------------------------------------- .list01-odd { background-color: #FFCCFF; } .list01-even{ background-color: #EEFFEE; } .list02-odd { background-color: #FFD5AA; } .list02-even{ background-color: #EEFFEE; } のようにすると、変に分岐が増えてしまうので CSS セレクタを使う。 .list01 .odd { background-color: #FFCCFF; } .list01 .even{ background-color: #EEFFEE; } .list02 .odd { background-color: #FFD5AA; } .list02 .even{ background-color: #EEFFEE; } /**********************************/ var ul_elms = document.getElementsByTagName( 'UL' ); for ( var i=0; i<ul_elms.length; i++ ) { var count = 0; var element = ul_elms[i].firstChild; while ( element ) { if ( element.tagName == "LI" ) { addClassName( element, count % 2 == 0 ? 'even' : 'odd' ); count ++; } element = element.nextSibling; } } // を [ </body> の前 ] に置いておくとわずらわしいことを考えずにすむ。 /**************************************/ // ( 簡易版 ) function addClassName( e, className ) { if( !RegExp( '(^|\\s)' + className + '(\\s|$)' ).test( e.className ) ) { e.className += ( e.className == '' ) ? className : ' ' + className; } }
- yyr446
- ベストアンサー率65% (870/1330)
＞＞今回の質問で書いたスクリプトを添削していただければ大変助かります。＜＜と言われても、 手段の添削は出来ても、目的の添削は出来ないですよ。 <html>本体やCSSを勝手に書き換えたらあなたの意図するものと 違うものになってしまうかもしれないでしょ。 私の参考解答は、以前あなたが投稿されていた、中途半端な <html>本体やCSS定義と質問内容を元に勝手に目的を想像して、 作っちゃたもので、<html>本体やCSS定義も元のままじゃないですよ。 私が提示したサンプルは、そのままいじらなければ動作確認できる はずなので、実際そのまま確認してみて、何をやっているかを理解 した後、あなたのソースに適用してみて下さい。 そうしないと、何かやりたい事が増えるたびにまる投げ質問する事に なりますよ。（急いでるわけでもないでしょ） してみてください
- yyr446
- ベストアンサー率65% (870/1330)
今日は、1行に2個づつ<li>を入れて 各行交互に色をつけるってやつですね。 白、ピンクの<ul>にid="list01",白、茶色の<ul>にid="list02" をつけておいて、以前のプログラムを直します。 ※ところでjavascriptやcssは理解されているのですよね。 ご参考になれれば.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-jis"> <title>index03のページ</title> <style type="text/css"> <!-- body { background-color:#FFFFCE; background-image:url(); } .style153 {font-size:16px;color:#9CCE39;font-weight:bold;} .list01-odd {background-color:#FFCCFF;} .list01-even {background-color:#EEFFEE;} .list02-odd {background-color:#FFD5AA;} .list02-even {background-color:#EEFFEE;} a {color: #cc6600} ul,li { padding:0; margin:0; line-height:1.3; font-size:14px; font-weight:italic; } li a {text-decoration: none;} .listblock ul li { float:left; width:340px; list-style:none; padding-left:30px; } .unnamed1 { font-size: 16px; color: #FF0000; font-style: italic; font-weight: normal; } // --> </style> <script type="text/javascript"> <!-- window.onload = function () { var ul_elms =document.getElementsByTagName("UL"); for(var i=0;i<ul_elms.length;i++){ switch(ul_elms[i].id){ case "list01": li_class_set(ul_elms[i].firstChild,"list01-evn","list01-odd"); break; case "list02": li_class_set(ul_elms[i].firstChild,"list02-evn","list02-odd"); break; default: break; } } function li_class_set(element,evn_class,odd_class){ var count=0; while(element){ if(element.nodeName=="LI"){ if(count>1){ element.className = evn_class; count=(count>2)?0:3; }else{ element.className =odd_class; count++; } } element=element.nextSibling; } } } // --> </script> </head> <body> <br /> <table width="746" height="26" border="1" bordercolor="#9CCE39" bordercolorlight="#9CCE39" bordercolordark="#9CCE39" bgcolor="#9CCE39"> <tr> <td width="736" height="20" align="left" valign="middle" background="color01.gif"> <span class="style153">■</span> <span class="style153">ーー業</span> <span class="style153">■</span> </td> </tr> </table> <br /> <span class="unnamed1">（あ行）</span> <div class="listblock"> <ul id="list01"> <li><a href="A073.htm">・あああ</a></li> <li><a href="A017.htm">・いいい</a></li> <li><a href="A069.htm">・ううう</a></li> <li><a href="A043.htm">・えええ</a></li> <li><a href="A080.htm">・おおお</a></li> </ul> </div> <div style="clear:both;"></div> <span class="unnamed1">（か行）</span> <div class="listblock"> <ul id="list02"> <li><a href="A073.htm">・かかか</a></li> <li><a href="A017.htm">・ききき</a></li> <li><a href="A069.htm">・くくく</a></li> <li><a href="A043.htm">・けけけ</a></li> <li><a href="A080.htm">・こここ</a></li> </ul> </div> </body> </html>
お礼
何度もご回答いただき、ありがとうございます。 css、Javascriptともに、理解している、という段階まではまだ達していません(+_+)こちらでみなさんのアドバイスを参考に、日々試行錯誤しております・・・。 さて、今回ご回答いただいたもので試してみたのですが、うまく作動しないようです(?_?) もしお時間が許すようであれば、今回の質問で書いたスクリプトを添削していただければ大変助かります。
- fujillin
- ベストアンサー率61% (1594/2576)
あまりよく見ていませんが… ＞このやり方ではうまくいきません。 いくつか問題はありますが、やり方自体は間違ってはいないでしょう。 1）onloadを複数並べても、バッティングするだけで最後のものしか実行 されません。（複数定義する方法は、過去の質問を検索してください） 2）変数countの値でodd、evenを判断しようとしているのだと推測しますが、 countのインクリメント、条件判断あたりがおかしい。 の2点を修正すれば動作するでしょう。 もとの形をほぼ残して、2個ある同じものをまとめるとこんな感じ？ window.onload = function() { // データ：name, color1_Class, color2_Classの順 var data = [ ['hoge1','list01-evn','list01-odd'], ['hoge2','list02-evn','list02-odd'] ] var ul_elms =document.getElementsByTagName("UL"); var i, j, count, elment, typ; for(i=0; i<ul_elms.length; i++) { j = -1; typ = -1; while (data[++j]) { if (ul_elms[i].className == data[j][0]) { typ = j; break; } } if (typ > -1) { count = true; elment = ul_elms[i].firstChild; while(elment) { if(elment.nodeName=="LI") { elment.className = count?data[typ][1]:data[typ][2]; count = !count; } elment = elment.nextSibling; } } } }
お礼
何度もご回答いただき、本当にありがとうございます。 仕事の関係上、本来の自分のやらなければいけないことと違うことをまかされ、正直かなりあせっていて、ご親切にアドバイスを下さるyyr446様に頼りすぎていました、申し訳ありません。