css expression 隔行换色

307 阅读 0 评论 203 点赞

我是靠谱客的博主畅快香水，这篇文章主要介绍css expression 隔行换色，现在分享给大家，希望可以做个参考。

css实现的，用expression但在实际中部建议使用，占用资源而且firefox浏览器不支持

<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 全选注:如需引入外部Js需刷新才能执行]

就两颜色的时候可以改这这样
<style>
.db tr{
background-color:expression('#abcdef,#123456'.split(',')[rowIndex%2]);
}
</style>

<style> 
.db { border-collapse:collapse;} 
.db tr{ background-color:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); } 
</style> 
<table width="100%" 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> 
</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 全选注:如需引入外部Js需刷新才能执行]

如果真想用，可以用下面的js写的

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

最后

以上就是畅快香水最近收集整理的关于css expression 隔行换色的全部内容，更多相关css内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

点赞(203)

本文分类：CSS/CSS3
浏览次数：307 次浏览
发布日期：2022-04-06 05:55:03
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzogf1_14_j_14__27_.html

相关文章

电脑日常使用5大注意事项不可不看

电脑日常使用5大注意事项不可不看

win7系统删除用户账户的方法(图文)

win7系统删除用户账户的方法(图文)

cdr怎么设计有描边的渐变色艺术字?

cdr怎么设计有描边的渐变色艺术字?

ai中怎么绘制怒火中烧的qq表情图标?

ai中怎么绘制怒火中烧的qq表情图标?

css expression 隔行换色

css expression 隔行换色

PS利用HIGH PASS FILTER高效无损地锐利猫咪照片

PS利用HIGH PASS FILTER高效无损地锐利猫咪照片

爱普生l350打印机怎么查看墨盒中的剩余墨水量?

爱普生l350打印机怎么查看墨盒中的剩余墨水量?

通过注册表修复我的电脑右键菜单中的管理

通过注册表修复我的电脑右键菜单中的管理

评论列表共有 0 条评论

发表评论取消回复

立即
投稿返回
顶部