时间戳

首页 > 解决方案 > 使用交替的文本行制作条纹 div

html - 使用交替的文本行制作条纹 div

问题描述

我有一个 div，其中包含一些跨度文本。我想让文本条带化以实现类似于表格的内容

tr:nth-child(even) {background-color: #f2f2f2;}
tr:nth-child(odd) {background-color: #cccccc;}

基本上使每一行的背景不同。

    #docIndHeader{
    width: 300px;
    }
    <div id="docIndHeader" class="doc" >
            <span class="assetType">IndHeader</span>
            <span id="IndHeaderID"><span class="fieldName">ID </span>: 83176322</span>
            <span id="IndHeaderVERSION"><span class="fieldName">VERSION </span>: 20190907:105916:000</span>
            <span id="IndHeaderNAME"><span class="fieldName">NAME </span>: INDEX</span>
            <span id="IndHeaderINDEX_STATUS"><span class="fieldName">INDEX_STATUS </span>: A</span>
            <span id="IndHeaderCODE_PRIMARY"><span class="fieldName">CODE_PRIMARY </span>: T</span>
    </div>

最简单的方法是什么？

标签： htmlcss

解决方案

尝试这个

span.line.odd {
  background-color: grey;
}
span.line.even {
  background-color: white;
}

span {
  display: block;
}
<body >
<div class="stripes">
  <span class="line">Some Text<span>Another span</span></span>
  <span class="line">Some Text<h2>this is a heading in the middle of the span!</h2></span>
  <span class="line">Some Text</span>
  <span class="line">Some Text</span>
</div>
<script type="text/javascript">
function stripes() {
 var strblock = document.getElementsByClassName("stripes");
 for(var i = 0; i < strblock.length; i++){
   var lines = strblock[i].getElementsByClassName("line");
   for(var j = 0; j < lines.length; j++){
     if(j%2 == 0){
       lines[j].classList.add("even");
     }
     else {
       lines[j].classList.add("odd");
     }
   }
 }
};
	stripes();
</script>
</body>

它甚至可以在同一行中使用多个跨度。只需确保“条纹”div 中没有其他跨度具有该类line，否则它将被 JS 片段计算在内。CSS 选择器会将其过滤掉，但 JS 需要调整以仅计算跨度。

推荐阅读