顯示並突出顯示HTML中的特定行

Question

我試圖實現一個應該預期具有以下屬性的網頁。

1. HTML頁面包含許多文本行（數千行），基本上是一個日誌文件。
2. 根據需要採取的行動，應該突出顯示與行動相關的行。 （確切地說，如果你點擊鉻檢查元素中的一個已記錄變量的相應源按鈕，就會發生這種情況。）

這似乎是非常基本的，但我無法弄清楚如何！可能是我錯過了一些文學術語。 謝謝。

Answer 1

你需要做幾件事情：

$("li").each(function(i, element) { 
    var li = $(element); 

    if (li.text() == "Orange") { 
    li.addClass("selected"); 

    // Get position of selected element relative to top of document 
    var position = li.offset().top; 

    // Get the height of the window 
    var windowHeight = $(window).height(); 

    // Scroll to and center the selected element in the viewport 
    $("body").scrollTop(position - (windowHeight/2)); 
    } 
}); 

見DEMO。

Answer 2

有很多方法可以解決這個問題。但是，在記錄的源代碼中是否有任何類標記，或者只是一個大的文本塊？

如果在html上有類或id標記，你可以使用javascript或jquery來做到這一點。

document.getElementById('myText'); 

或jQuery的

var element = $("#myText"); 
//example css changes 
element.css("position","center"); 
element.css("color","red"); 

然後改變這些HTML元素的CSS樣式。