Maison > Article > interface Web > expression css changement de couleur entrelacé_Échange d'expérience

expression css changement de couleur entrelacé_Échange d'expérience

WBOYoriginal: 2016-05-16 12:05:031467parcourir

Il est implémenté en CSS, en utilisant l'expression mais il est recommandé de l'utiliser en pratique. Il consomme des ressources et le navigateur Firefox ne prend pas en charge

.
<style>  
.db tr{  
background-color:expression('#000000,#333333,#555555,#777777,#999999,#bbbbbb,#dddddd,#ffffff'.split(',')[rowIndex%8]);  
}  
</style>
<table width="500" border="1" class="db">  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
</table>

[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]

Quand il n'y a que deux couleurs Vous pouvez le changer comme ceci

[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour l'exécuter ]

Si vous voulez vraiment l'utiliser, il peut être écrit avec le js suivant

<table id="list" width="300">
    <table id="list" width="300"> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
    </tr> 
 </table>
        <script type="text/javascript"> 
  
 </script> 
    
    
         
    
    
         
    
    
         
    
    
         
    
    
         
    
    
         
    
    
         
    
    
         
    
    
         
    
    
         
    
    
         
    
 
<br><input onclick="runEx('runcode61711')" type="button" value="运行代码"><input onclick="doCopy('runcode61711')" type="button" value="复制代码"> <input onclick="doSave(runcode61711)" type="button" value="保存代码"> <a href="/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl+A pour tout sélectionner Remarque : </a>Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter ]<script type="text/javascript"> 
  
 </script>
</table>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tutoriel style_basic sur la barre de défilement HTMLArticle suivant：Tutoriel style_basic sur la barre de défilement HTML

Articles Liés

Voir plus