delphi twebbrowser setting attribute style for Element has no effect

Question

delphi twebbrowser setting attribute style for Element has no effect

2.7k Views Asked by Avrob At 04 April 2025 at 14:06

I'm setting attribute style for paragraph

IHTMLElement using

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

The style is being written in html, but TWebBrowser component does not center the text.

After saving and reopening the html document the text is shown in the center.

What should I do for style changing take into effect immediately?

Original Q&A

There are 1 best solutions below

**MartynA** · Accepted Answer

The following works fine for me (in D7, on Win7 64-bit with IE 11).

After clicking Button1, the WebBrowser displays "Some text" right-aligned, as expected. After clicking Button2, "some text" immediately displays center-aligned. Hopefully, a side-by-side comparison with your code will reveal what makes the difference. If the following doesn't help, you might get a better answer if you add a SSCCE to your q.

HTML

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

Code

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;

Update: The OP mentioned in a comment using IE6 on WinXP. I tried by code in a WinXP VM with IE8 installed and got the behaviour the OP described. After calling SetAttribute, "text-align: center" was added as the last attribute of the style and was not acted upon, the text remaining right-aligned (and the original "text-align: right", capitalised, appeared at the start of the style attribute list).

However, the following change resulted in the text being centered as desired.

  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;

(I removed the code to get and use the text-align attribute because the GetAttribute provoked an exception on WinXP/IE8.)

Presumably someone au fait with the details of the history of IE's DOM and rendering could explain the reason for this difference between the behaviour of IE11 and IE6/8.

delphi twebbrowser setting attribute style for Element has no effect

There are 1 best solutions below

Related Questions in DELPHI

Related Questions in TWEBBROWSER

Trending Questions

Popular # Hahtags

Popular Questions