delphi twebbrowser为Element设置属性样式没有效果答案

【问题标题】：delphi twebbrowser setting attribute style for Element has no effectdelphi twebbrowser为Element设置属性样式没有效果
【发布时间】：2014-11-22 17:30:54
【问题描述】：

我正在为段落设置属性样式

IHTMLElement 使用

Elem.style.setAttribute('TEXT-ALIGN','center',0);

样式是用 html 编写的，但是 TWebBrowser 组件没有使文本居中。

保存并重新打开 html 文档后，文本显示在中心。

样式更改立即生效怎么办？

【问题讨论】：

标签： delphi twebbrowser

【解决方案1】：

以下对我来说很好（在 D7 中，在带有 IE 11 的 Win7 64 位上）。

单击 Button1 后，Web 浏览器按预期显示右对齐的“某些文本”。后单击Button2，“一些文本”立即显示居中对齐。希望，与您的代码并排比较将揭示不同之处。如果以下内容没有帮助，则将 SSCCE 添加到您的 q 中可能会得到更好的答案。

HTML

<html>
  <body>
    <div id="adiv" style="text-align: right; color: Gray">Some text</div>
  </body>
</html>

代码

procedure LoadWBFromString(WB : TWebBrowser; AString : String; out Doc2 : IHtmlDocument2);
var
  V : OleVariant;
begin
  WB.Navigate('about:blank');
  Doc2 := WB.Document as IHTMLDocument2;
  Doc2.clear;

  V := VarArrayCreate([0, 0], varVariant);
  V[0] := AString;
  try
    Doc2.Write(PSafeArray(TVarData(v).VArray));
  finally
    Doc2.Close;
  end;
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
  Doc2 := Nil;
  LoadWBFromString(WebBrowser1, Memo1.Lines.Text, Doc2);
end;

procedure TForm1.Button2Click(Sender: TObject);
var
  E : IHtmlElement;
  Doc3 : IHtmlDocument3;
  S : String;
begin
  Doc2.QueryInterface(IHtmlDocument3, Doc3);
  Assert(Doc3 <> Nil);
  E := Doc3.GetElementByID('adiv');
  if E <> Nil then begin
    E.Style.SetAttribute('text-align', 'center', 0);
    S := E.Style.GetAttribute('text-align', 0);
    Caption := S;
  end;
end;

更新： 评论中提到的 OP 在 WinXP 上使用 IE6。我通过代码尝试了安装了 IE8 的 WinXP VM 并获得了 OP 描述的行为。打电话后 SetAttribute, "text-align: center" 被添加为样式的最后一个属性并且没有被采取行动，文本保持右对齐（和原始 "text-align: right"，大写，出现在样式属性列表的开头）。

但是，以下更改导致文本按需要居中。

  if E <> Nil then begin
    E.style.set_textalign('center');
//    E.style.setAttribute('text-align', 'center', 0);
//    S := E.Style.GetAttribute('text-align', 0);
//    Caption := S;
    Memo2.Lines.Text := Doc2.body.OuterHtml;
  end;

（我删除了获取和使用 text-align 属性的代码，因为 GetAttribute 在 WinXP/IE8 上引发异常。）

大概有人知道 IE 的 DOM 和渲染的历史细节可以解释造成 IE11 和 IE6/8 行为差异的原因。

【讨论】：

相同的结果。样式是用 html 编写的，但 TWebBrowser 组件不会使文本居中。在程序运行时，我将 HTML 读取为字符串并检查是否有样式属性。样式更改立即生效应该怎么做？
相同的结果。样式是用 html 编写的，但 TWebBrowser 组件不会使文本居中。在程序运行时，我将 HTML 读取为字符串并检查是否有样式属性。在这两种情况下，属性都具有“center”值，但 webbrowser 不会立即应用此样式，而是仅在保存并重新打开 html 文档后应用。
使用 DocRange.execCommand('JustifyCenter', false, EmptyParam);立即影响。但我更喜欢使用 style 属性。
我用 Memo1、Webbrowser1、Button1、Button2 组件创建了一个全新的项目。如您所述，为按钮设置 onClick 。 Button1点击后的文字在浏览器中右对齐显示，但button2点击后的tex保持右对齐，但标题的值为“center”
然后我用 onClick 添加了 button3 "Memo1.Lines.Text:=Doc2.body.outerHTML;"在 memo1 中收到“
一些文字
"