javascript - CSS TextArea - 为每条可见线赋予不同的不透明度

Question

所以我的 html 中有一个文本区域

<textarea id="log" class="txtbx-log" rows="10"></textarea>

现在我用它来实时显示运行日志。我希望第一行的不透明度为 100%，每行的不透明度都降低 10。

这可能与 css/javascript 相关吗？

我知道可以制作多个 div 并为每个 div 赋予自己的不透明度，并在收到新日志消息时移动 div/不透明度的位置。

但这会导致丑陋的代码将日志消息从一个 div 移动到另一个 div。有没有更简单的方法来做到这一点。

** 编辑 **

截至目前，我只是像这样在日志消息前添加。

on_chunk_uploaded: function() {
                        $('#log').prepend("<span>Chunk finished uploading</span>")
}

Answer 1

而不是这个...

on_chunk_uploaded: function() {
    $('#log').prepend("<span>Chunk finished uploading</span>")
}

你可以这样做......(如果你像你说的那样每个日志只显示 10 条消息？)

on_chunk_uploaded: function() {
    $('#log').prepend("<span>Chunk finished uploading</span>")

    // If there are now more than 10 log lines, remove the last one
    if($('#log span').length > 10){
        $('#log span:last').remove();
    }

    // Remove all classes from the log lines
    $('#log span').removeClass();
    var opacity = 100;

    // Cycle through each line and add decrementing opacity classes
    $.each($('#log span'), function(index, $element){
        $element.addClass('opacity-' + opacity);
        opacity = opacity - 10;
    });
}

然后添加一些适当的 CSS，不透明度从 opacity-100 到 opacity 0...(未测试!)

CSS:

.opacity-100
{
   /* Opaque, doesn't need transparency... */
}
.opacity-90
{
   opacity: 0.9;
   filter:Alpha(opacity=90);
}
.opacity-80
{
   opacity: 0.8;
   filter:Alpha(opacity=80);
}
/* All the way down to 0... */

注意:由于我不小心将不透明度附加了 .而不是 +(PHP 习惯)