7

假设我有一个p元素或div元素的文本大约有 10-15 行，现在我的客户对此有一个奇怪的调用，他需要具有不同文本颜色的奇数/偶数行。说第 1 行 - 黑色，所以第 2 行应该是灰色，第 3 行应该再次是黑色等等......

所以我决定使用跨度并改变颜色，但可变分辨率在这里杀死了东西，我知道:first-line选择器（在这种情况下这不会有用），也像:odd&这样的选择器:even将被排除在这里，因为我不使用表格，所以有什么方法可以使用 CSS 实现这一点，还是需要使用 jQuery？

TL; DR：我想定位段落或 div 中的奇数/偶数行

我需要一个 CSS 解决方案，如果没有，欢迎使用 jQuery 和 JavaScript

4

3 回答 3

11

演示 1

http://jsfiddle.net/Fptq2/2/
应该适用于所有现代浏览器。

本质上它：

  1. 将源拆分为单个单词一次
  2. 将每个单词包装在一个跨度中（丑陋但有效- 现在可以将任何样式应用于跨度）
  3. 使用简单的位置计算来确定元素是否低于前一个
  4. 根据索引更改更改颜色
  5. 在调整大小时执行 #3-5（这绝对应该被限制！）
$(".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);

演示 2

小提琴：http: //jsfiddle.net/Fptq2/4/

  • 使用更大的文本块
  • 显示应用于多个元素的效果
  • 缓存“所有跨度”选择器
  • 添加调整大小限制
(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);
})();

输出

在此处输入图像描述

于 2013-04-05T10:24:16.390 回答
4

这是一种可能的解决方案。它生成许多<div>放置在文本后面的元素。<div>元素从父容器继承字体大小，因此不应损坏标记。

HTML：

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

JavaScript：

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);

演示：http: //jsfiddle.net/M3pdy/2/

于 2013-04-05T09:53:36.717 回答
1

回答这个问题为时已晚.. 但是如果这个答案对想要将换行的文本段落分成单独的行的其他人有所帮助，那么我很高兴
将换行的文本转换为行（用于行编号或将每行分成单独的行）元素）是一个经常出现在板上的问题，我终于有必要这样做了，所以在这里（对于 MooTools 和 jQuery - jQuery 版本未经测试，所以如果有任何问题请离开一条评论）。这个特殊的化身将每个包裹的行分成一个不同的新元素，但可以修改为只计算行数。
使用代码你可以实现 $("#someElement").linify()
这里下面的 URL 是这个
jquery-mootools的概念证明

这是一个快速小提琴，它演示了单个 div 项的包装文本行。
http://jsfiddle.net/UANeP/

于 2014-05-10T16:58:46.633 回答