css隔行换色的方法

最新推荐文章于 2024-01-24 16:29:20 发布
最新推荐文章于 2024-01-24 16:29:20 发布
阅读量762 收藏 1
点赞数
文章标签： css 测试 stylesheet 浏览器 table class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/michaelia530/article/details/7018775
版权

CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：

一、background背景图片

如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。

二、CSS Expression

文字：color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');

背景：background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');

注意：本方法浏览器兼容度不够，不支持FF3。

三、class分别定义

<ul>
<li class="bgcolor">...
<li>...
<li class="bgcolor">...
<li>...
</ul>

实实在在的写法。

四、通过JS 看实例


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52css.com 四种实现CSS隔行换色的方法</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function bgChange(){
  if(!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  for(var i=0; i<tables.length; i++){
    var odd = false;
    trs = tables[i].getElementsByTagName("tr");
    for(var j=0; j<trs.length; j++){
      if(odd==true){
        trs[j].style.background = "#ccc";
        odd = false;
      }else{
        odd = true;
      }
    }
  }
}
window.onload = bgChange;
</script>
</head>
<body   >
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
</table>
<script type='text/javascript'>
//<![CDATA[
if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="<span class='runtimedisplay'>Run in 184 ms, 9 Queries.</span>";
//]]>
</script></body>
</html>
michaelia530
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ul li 换色 li 列表布局隔行背景颜色
02-12
ul li 换色 li 列表布局隔行，color from red tabs 背景颜色
css 设置元素样式隔行变色
qwyio的博客
05-25 2642
:nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 odd 奇数行 even 偶数行 效果图 页面 <template> <div class="page-container"> <transition-group tag="ul" appear> <li v-for="item in 10" :key="item"> {{ item % 2 == 0 ...
css如何实现隔行换色
百变鹏仔工作室
01-24 1285
上述代码中，为表格中的奇数行和偶数行分别设置了不同的背景颜色，从而实现了隔行换色的效果。选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，是两种不同的颜色值，可以根据需要进行修改。在CSS中，可以使用。
四种实现CSS隔行换色的方法
eddy615的专栏
09-16 2144
     CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：一、background背景图片如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。二、CSS Expression文字：color:expression(this.sourceIndex%2 ? #ff0000:#000000);背景：backgroun
CSS表格隔行变色
闪电⚡之王的博客简介
12-30 455
【代码】CSS表格隔行变色。
CSS expression 隔行换色效果
09-25
在本例中，我们将探讨如何使用CSS expression以及JavaScript来实现隔行换色的效果。 首先，让我们来看看CSS expression的使用。在提供的代码中，`expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8')` 是一个...
CSS2实现的隔行换色
10-30
CSS2实现的隔行换色 CSS2实现的隔行换色是使用CSS2的相邻选择符来实现的，该技术可以实现表格的隔行换色效果。该技术的优点是无需使用JavaScript脚本和class样式，只需使用CSS代码即可实现该效果。 首先，我们需要...
网页设计制作CSS实现隔行换色两种方法
01-19
网页设计制作,CSS实现隔行换色两种方法: 第一种方法: 以下为引用的内容：<style type=text/css>UL.myul1 LI{background-color: [removed]this.sourceIndex%2==0?’#9FB7F6′:’#B6C8F8′);}</style>...
CSS网页隔行换色技巧
01-19
CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：一、background背景图片　如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。...
JS+CSS实现Li列表隔行换色效果的方法
10-24
本篇将介绍如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 实现 `li` 列表元素的隔行换色效果。首先，我们需要理解 CSS 的基本样式设置以及 JavaScript 如何操作 DOM（文档对象模型）中的元素。 1. **...
HTML使用CSS实现表格隔行变色
weixin_70815247的博客
07-14 4260
HTML使用CSS实现table表格的隔行变色，要用到伪类:nth-child（）
CSS中的隔行换色
xxxatt的专栏
09-11 991
一.表格的隔行换色 tr {background-color:expression((this.sectionRowIndex==0)?"":(this.sectionRowIndex%2==0)?"red":"blue")}-->第1行第1行第2行第2行第3行第3行第4行第4行第5行第5行 二.表格的td换色 tr {background-color:expression((this.secti
用css实现隔行背景色显示
m0_62285976的博客
03-30 625
2是几的倍数全为什么样式，背景色，字体颜色，大小通用。
Css隔行变色
weixin_68665302的博客
06-09 1127
csscss样式 table { line-height: 25px; margin: 0px auto; border:gainsboro; } h3{ font-weight: 400; font-size:40px ;
css 单双行隔行换色,CSS代码小技巧轻松实现隔行换色
weixin_32126511的博客
08-03 992
以下为引用的内容：www.devdao.com - 四种实现CSS隔行换色的方法function bgChange(){if(!document.getElementsByTagName) return false;var tables = document.getElementsByTagName("table");for(var i=0; ivar odd = false;trs = tabl...
前端案例—表格隔行换色
Admin_76的博客
10-22 587
两个版本JS版与jQuery版
html嵌套css隔行变色,CSS应用中实现隔行换色的四种方法
weixin_40007541的博客
06-24 414
1、background背景图片如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。2、CSSExpression文字：color:expression(this.sourceIndex%2?'#ff0000':'#000000');背景：background-color:expression(this.sourceIndex%2?'#ff0000':'#000000')...
html隔行背景,css li列表布局隔行背景颜色不同布局实例
weixin_42499999的博客
06-29 817
为了避免影响步骤做调用，让法度模范精练，应用ul li列表构造实现以上距离背风物布局，同时鼠标滑过悬停li上方后盾变色换色，通常有两种门径。第一种：后盾图片，切一窄的竖条靠山图片素材，将背景图片作为ul后台，让配景图片作为ul后台后高下支配平铺，即可轻松完成间隔成效。第二种：应用JQ殊效完成，通过JS特效实现多么间隔后盾色同时鼠标经由过程后盾换色造诣，殊效代码多并须要引人JS文件与代码。此后CSS...
html隔行换色代码
最新发布
05-31
可以通过CSS样式来实现HTML表格的隔行换色效果，具体代码如下： ```css tr:nth-child(odd) { background-color: #f2f2f2; } ``` 其中，`tr` 表示表格中的行，`nth-child(odd)` 表示选中奇数行，`background-color...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值