javascript - 在 HTML 中显示和突出显示特定行

Question

我正在尝试实现一个应该具有以下属性的网页。

1. HTML 页面包含多行文本（数千行），基本上是一个日志文件。
2. 在执行所需操作时，与该操作相关的行应突出显示并显示。（如果您单击 chrome 检查元素中记录的变量的相应源按钮，就会发生这种情况。）

这似乎很基本，但我不知道怎么做！可能是我遗漏了一些文学术语。谢谢你。

Answer 1

有很多方法可以解决这个问题。但是记录的源代码中是否有任何类标签，或者只是一个大文本块？

如果 html 上有 class 或 id 标签，您可以使用 javascript 或 jquery 来执行此操作。

document.getElementById('myText');

或在jQuery中

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

然后更改这些 html 元素的 css 样式。

Answer 2

你需要做几件事：

$("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));
  }
});

见演示。