我有一个包含 span 中的一些文本的 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>最简单的方法是什么？
最佳答案
试试这个
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 将需要调整以仅计算跨度。
关于html - 使用交替的文本行制作条纹 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59461434/