Javascript 如何以奇偶交替文本行为目标

假设我有一个

p

元素或

div

元素有一个文本，比如说10-15行，现在我的客户对此有一个奇怪的调用，他需要具有不同文本颜色的奇偶行。说第1行是黑色的，所以第2行应该是灰色的，第3行应该是黑色的，依此类推

因此，我决定使用span并更改颜色，但可变分辨率在这里会扼杀一切，我知道

:first-line

选择器（在这种情况下它不会有用），而且像

:odd

&

:偶数

这样的选择器在这里也会被排除，因为我没有使用表，那么，有没有什么方法可以使用CSS实现这一点，或者我需要使用jQuery

TL；DR：我想针对段落或div中的奇偶行

---

我需要一个CSS解决方案，如果不是，欢迎使用jQuery和JavaScript。它会生成许多放置在文本后面的

元素<代码>元素从父容器继承字体大小，因此标记不应被损坏

HTML:

Lorem ipsum。。。

JavaScript:

var div=document.getElementById（“测试”），
层=document.createElement（“div”），
text=div.innerHTML，
线宽；
layer.appendChild（document.createTextNode（“\u00A0”）；
div.insertBefore（层，div.firstChild）；
lineHeight=layer.offsetHeight；
div.style.position=“相对”；
div.style.overflow=“隐藏”；
div.style.color=“透明”；
layer.style.position=“绝对”；
layer.style.zIndex=“-1”；
addEventListener（“调整大小”，（函数突出显示（）{
while（layer.firstChild）
layer.removeChild（layer.firstChild）；
对于（变量i=0，n=Math.ceil（div.offsetHeight/lineHeight）；i

演示：

演示1
应该适用于所有现代浏览器

基本上，它：

将源代码拆分为单个单词一次

将每个单词包装在一个范围内（丑陋但有效的任何样式现在都可以应用于该范围）

使用简单的位置计算来确定图元是否低于上一个图元

根据索引更改更改颜色

在调整大小时执行#3-5（这绝对应该限制！）

$（“.stripe”）。每个（函数（）{
var obj=$（本）；
var html=obj.html（）.replace（/（\S+\S*）/g，“$1”）；
html（html）；
});
函数高亮显示（）{
var偏移=0；
var指数=0；
var colors=[“#eee”、“#000”]；
变量跨度=$（“.stripe span”）；
//注意此处直接使用DOM（无jQuery）来提高性能
对于（变量i=0；i

演示2 小提琴：

• 使用较大的文本块
• 显示应用于多个图元的效果
• 缓存“所有跨度”选择器
• 添加调整大小限制

（函数（）{
$（“.stripe”）。每个（函数（）{
var obj=$（本）；
var html=obj.html（）.replace（/（\S+\S*）/g，“$1”）；
html（html）；
});
var偏移=0；
var指数=0；
变量颜色=[“#ccc”、“#000”]；
变量跨度=$（“.stripe span”）；
函数高亮显示（）{
对于（变量i=0；i

输出

---

现在回答这个问题已经太晚了。。但是，如果这个答案对那些想把一段包装好的文字分成几行的人有帮助，那么我很高兴
将包装文本转换为行（用于行编号或将每行分解为单独的元素）是一个在黑板上经常出现的问题，我终于有了这样做的必要，现在就是这样（对于MooTools和jQuery，jQuery版本都没有经过测试，因此如果有任何问题，请留下评论）。这个特殊的化身将每一个包装好的行分解成一个不同的新元素，但是可以修改为只简单地计算行数。
使用代码可以实现这一点

$（“#someElement”）.linify（）

下面的URL是这方面的概念证明


下面是一个快速提琴，它演示了各个div项的包装文本行。

---

它是“TL；DR”，表示“太长；没有阅读”，而不是“TLTR”/“太长而无法阅读”：）无论如何，您不能使用CSS设置第n行的样式。你需要JavaScript，只是一个输入错误：pThere'snow-way-to-do-this-is-css；您必须使用jQuery。我想你正在寻找的答案是另一个有用的答案，我也有同样的想法，但OP想要文本颜色，而不是背景：/Brilliant，这无法检测换行，但尝试+1很好，有没有改变文本颜色或针对某个元素而不是欺骗背景的想法？@VisioN如果有，你就要成为明星了：p@Mr.Alien是的！检查更新的解决方案。现在，它确实做到了预期的效果。我试过了

<div id="test">Lorem ipsum ...</div>

var div = document.getElementById("test"),
    layer = document.createElement("div"),
    text = div.innerHTML,
    lineHeight;

layer.appendChild(document.createTextNode("\u00A0"));
div.insertBefore(layer, div.firstChild);

lineHeight = layer.offsetHeight;
div.style.position = "relative";
div.style.overflow = "hidden";
div.style.color = "transparent";
layer.style.position = "absolute";
layer.style.zIndex = "-1";

window.addEventListener("resize", (function highlight() {
    while (layer.firstChild)
        layer.removeChild(layer.firstChild);

    for (var i = 0, n = Math.ceil(div.offsetHeight / lineHeight); i < n; i++) {
        var line = document.createElement("div"),
            block = document.createElement("div");

        line.style.height = lineHeight + "px";
        line.style.color = i % 2 ? "#ccc" : "#aaa";
        line.style.overflow = "hidden";

        block.innerHTML = text;
        block.style.marginTop = -i * lineHeight + "px";

        line.appendChild(block);
        layer.appendChild(line);
    }
    return highlight;
})(), false);

$(".stripe").each(function(){
  var obj = $(this);
  var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
  obj.html(html);
});

function highlight(){
    var offset = 0;
    var colorIndex = 0;
    var colors = ["#eee","#000"];
    var spans = $(".stripe span");

    // note the direct DOM usage here (no jQuery) for performance
    for(var i = 0; i < spans.length; i++){
        var newOffset = spans[i].offsetTop;  

        if(newOffset !== offset){
            colorIndex = colorIndex === 0 ? 1 : 0;
            offset = newOffset;
       }

       spans[i].style.color = colors[colorIndex];
    }
}

highlight();
$(window).on("resize", highlight);

(function () {
    $(".stripe").each(function () {
        var obj = $(this);
        var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
        obj.html(html);
    });

    var offset = 0;
    var colorIndex = 0;
    var colors = ["#ccc", "#000"];
    var spans = $(".stripe span");

    function highlight() {
        for (var i = 0; i < spans.length; i++) {

            var newOffset = spans[i].offsetTop;
            if (newOffset !== offset) {
                colorIndex = colorIndex === 0 ? 1 : 0;
                offset = newOffset;
            }

            spans[i].style.color = colors[colorIndex];
        }
    }

    highlight(); // initial highlighting

    var timeout;
    function throttle(){
        window.clearTimeout(timeout);
        timeout = window.setTimeout(highlight, 100);
    }

    $(window).on("resize", throttle);
})();