Question

我在Delphi上使用THTMLViewer，加载HTML后，我需要修改一些样式，如字体颜色或背景颜色。如果我仅知道元素ID，如何实现？我想这与IDDisplay有某种联系，但是在帮助文件和演示中找不到任何线索。考虑我有这个html：

<html>
  <body>
    <span id="text1">This is text 1</span>
    <a href="#" id="link1">This is link 1</a>
  </body>
</html>

如果我想将text1颜色更改为红色，该怎么办？

Answer 1

您可以在加载HTML时对其进行编辑。可以执行此操作的示例如下。

如果您需要更多的样式，则不只是添加带有<head>元素的<style>来指定CSS文件，或者直接在<html>标签后直接样式。

这是我尝试过的方法，并且对您的示例有效。您必须实现OnParseBegin事件：

procedure TForm2.FormCreate(Sender: TObject);
begin
  // Of course you can also load from file or stream or URL:
  HtmlViewer1.LoadFromString(
    '<html>' +
    '  <body>' +
    '    <h1>Yay! This works!</h1>' + 
    '    <p>This paragraph is not red.</p>' +
    '    <p><span id="text1">This is text 1.</span> this comes after it.</p>' +
    '    <p><a href="#" id="link1">This is link 1</a>.</p>' +
    '    <p>This paragraph is normal too.</p>' + 
    '  </body>' +
    '</html>');
end;

procedure TForm2.HtmlViewer1ParseBegin(Sender: TObject; var Source: TBuffer);
var
  S: string;
  B: TBuffer;
begin
  S := Source.AsString;

  // Add inline styling.
  S := StringReplace(S, 'id="text1"', 'id="text1" style="color: Red"', []);

  B := TBuffer.Create(S);
  try
    Source.Assign(B);
  finally
    B.Free;
  end;
end;

Answer 2

现在我们在说话。如我先前所写，我需要更改HTML加载的样式 AFTER ，换句话说，无法执行OnParseBegin的样式，因为无论使用什么术语，OnParseBegin都会在HTML完全加载或呈现之前发生。考虑以下脚本：

procedure TForm1.FormCreate(Sender: TObject);
begin
  HtmlViewer1.LoadFromString('<html><head></head><body><a id="link1" href="link1" color="#00ff00">This is red link, click this link to change it to green</a></body></html>');
end;

procedure TForm1.HtmlViewer1HotSpotClick(Sender: TObject; const SRC: string;
  var Handled: Boolean);
begin
  if HtmlViewer1.LinkAttributes.Values['href']='link1' then
  begin
    MessageBox(0,'This link event is captured, but how to change the text color here?','Some Title',0);
  end;
end;

...

当然，我可以轻松地编写脚本以将元素样式（即颜色）更改为绿色，从而在OnHotSpotClick中重新加载HTMLViewer。但是重新加载整个HTML主体（仅用于修改元素）似乎不算过分，这似乎太多了。我寻找类似的事情可以用jQuery完成，例如

<script>
  function changeText(obj) {
    $(obj).css(color,'#00ff00');
  }
</script>

<a href="#" onclick="changeText(this); return false;" style="color:#ff0000;">This is red text, click here to change it to green</a>

在THTMLViewer上修改元素样式

2 个答案: