四種方法輕松實現CSS隔行換色
作者：52css
你對CSS隔行換色的方法你是否了解，這里和大家分享一下四種實現CSS隔行換色的方法，相信本文介紹一定會讓你有所收獲。
本文和大家重點討論一下四種實現CSS隔行換色的方法，它們分別是background背景圖片，CSSExpression，使用class分別定義，通過JS看實例，希望本文介紹對你有所幫助。
四種實現CSS隔行換色的方法
CSS隔行換色的問題，其實很簡單，您可以根據您的需要，采用下面的任何一種方法，當然，要適合你的編碼與需求情況：
一、background背景圖片
如果行高固定的話，推薦使用背景圖，也推薦將行高固定！兼容一切瀏覽器。
二、CSSExpression
文字：
- color:expression(this.sourceIndex%2?'#ff0000':'#000000');
背景：
- background-color:expression(this.sourceIndex%2?'#ff0000':'#000000');
注意：本方法瀏覽器兼容度不夠，不支持FF3。
三、class分別定義
ExampleSourceCode
- <ul>
- <liclassliclass="bgcolor">...
- <li>...
- <liclassliclass="bgcolor">...
- <li>...
- </ul>
實實在在的寫法。
四、通過JS看實例
SourceCodetoRun
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>www.52CSS.com-四種實現CSS隔行換色的方法</title>
- <linkhreflinkhref="index.css"rel="stylesheet"type="text/css"/>
- <scripttypescripttype="text/javascript">
- functionbgChange(){
- if(!document.getElementsByTagName)returnfalse;
- vartables=document.getElementsByTagName("table");
- for(vari=0;i<tables.length;i++){
- varodd=false;
- trs=tables[i].getElementsByTagName("tr");
- for(varj=0;j<trs.length;j++){
- if(odd==true){
- trs[j].style.background="#ccc";
- odd=false;
- }else{
- odd=true;
- }
- }
- }
- }
- window.onload=bgChange;
- </script>
- </head>
- <body>
- <tablewidthtablewidth="600"border="0"align="center"cellpadding="0"
- cellspacing="0">
- <tr>
- <td>測試文字</td>
- <td>測試文字</td>
- <td>測試文字</td>
- </tr>
- </table>
- <scripttypescripttype='text/javascript'>
- //<![CDATA[
- if(document.getElementById('processtime'))document.
- getElementById('processtime').innerHTML="<spanclass='runtimedisplay'>
- Runin184ms,9Queries.</span>";
- //]]>
- </script></body>
- </html>
[可先修改部分代碼再運行查看效果]
【編輯推薦】
責任編輯：佚名
來源：
52css.com
