- ベストアンサー
スタイルシートを利用してリスト行の色分け方法
スタイルシートを利用して、リストを作成しています。 基本的には、dd や li を利用して、表示させたいと思います。その際に、1行毎に、バックグランドに色を入れたいと思います。 スタイルシートだけでは、出来ないと思います。 今は、1行毎に class を設定していますが、class を設定せずに自動で色分けが出来るようにしたいと思います。 JavaScript を利用すれば可能でしょうか。 希望を言わせて頂ければ、1ページ内に複数のリストが有り、行の色分が適用されるリストと、適用されないリストを分ける事が出来れば嬉しく思います。 参考になるアドバイスを頂ければと思います。
- nori_007
- お礼率75% (145/192)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ulのclassやidをみながらliのclassを設定してやればよいでしょう。 <html> <head> <style> .li1{background-Color:#ffc0c0;} .li2{background-Color:#c0ffc0;} .li3{background-Color:#c0c0ff;} .li4{background-Color:#ffffc0;} .li5{background-Color:#ffc0ff;} </style> <script> window.onload=function(){ var liclasses=Array("li1","li2","li3","li4","li5"); var uls=document.getElementsByTagName("ul"); for(var i=0;i<uls.length;i++){ if(uls[i].className=="hoge") var lis=uls[i].getElementsByTagName("li"); for(var j=0;j<lis.length;j++){ if(liclasses.length>j) lis[j].className=liclasses[j]; } } } </script> </head> <body> <ul class="hoge"> <li>1行目</li> <li>2行目</li> <li>3行目</li> <li>4行目</li> <li>5行目</li> </ul> <ul> <li>1行目</li> <li>2行目</li> <li>3行目</li> <li>4行目</li> <li>5行目</li> </ul> <ul class="hoge"> <li>1行目</li> <li>2行目</li> <li>3行目</li> <li>4行目</li> <li>5行目</li> </ul> </body> </html>
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
1行毎って偶数行と奇数行、みたいな事かな？ #1さんのサンプルをほとんど流用してます。（ステートメントの区切りがちょっと馴染まないので「{,}」の位置も変えてます） <html> <head> <style> .even{background-Color:#ccc;} </style> <script> window.onload=function(){ var uls=document.getElementsByTagName("ul"); for(var i=0;i<uls.length;i++) if(uls[i].className=="hoge") { var lis=uls[i].getElementsByTagName("li"); for(var j=0;j<lis.length;j++) if(j%2) lis[j].className='even'; } } </script> </head> <body> <ul class="hoge"> <li>1行目</li> <li>2行目</li> <li>3行目</li> <li>4行目</li> <li>5行目</li> </ul> <ul> <li>1行目</li> <li>2行目</li> <li>3行目</li> <li>4行目</li> <li>5行目</li> </ul> <ul class="hoge"> <li>1行目</li> <li>2行目</li> <li>3行目</li> <li>4行目</li> <li>5行目</li> </ul> </body> </html>
お礼
アドバイスをありがとうございます。 そうです。１行毎と言うのは、奇数行と偶数行の事を指しています。 奇数行、偶数行と言うですね。 サンプルはとても参考になりました。 １番さんのサンプルと合わせて、理解出来るようになりたいと思います。 とても助かりました。
お礼
早速のアドバイスありがとうございます。 CSS までは独学で何とか学べたのですが、JavaScropt に関しては。「あ！」と言う閃きが無く、毎回悩んでいます。 教えて頂いたスクリプトを理解出来るように学びたいと思います。 正直希望は、２番の回答になりますが、今後の応用が出来そうです。 とても助かりました。