如何在TMS WEB Core中修改TJSNode元素的CSS样式？

问题核心在于：getElementsByClassName返回的TJSHTMLCollection里，元素的静态类型是TJSNode——这是所有DOM节点的基类，但它没有style属性；而拥有style属性的是具体的TJSHTMLElement类型。可以通过以下两种方式解决：

方法一：强制类型转换 #

将获取到的TJSNode强制转换为TJSHTMLElement，即可正常访问style属性：

var
  TargetEl: TJSHTMLElement;
begin
  // 获取第一个带有Test类的元素并转换类型
  TargetEl := TJSHTMLElement(Panel1.ElementHandle.getElementsByClassName('Test')[0]);
  // 先判断元素是否存在，避免空指针错误
  if Assigned(TargetEl) then
    TargetEl.style.setProperty('display', 'none');
end;

方法二：使用querySelector直接获取（更推荐） #

querySelector支持CSS选择器语法，直接返回第一个匹配的TJSHTMLElement，无需额外类型转换，代码更简洁：

var
  TargetEl: TJSHTMLElement;
begin
  // 用CSS类选择器直接定位第一个.Test元素
  TargetEl := Panel1.ElementHandle.querySelector('.Test');
  if Assigned(TargetEl) then
    TargetEl.style.setProperty('display', 'none');
end;

注意事项 #

无论用哪种方法，都要先通过Assigned()检查元素是否存在——如果页面中没有带有Test类的元素，getElementsByClassName('Test')[0]或querySelector('.Test')都会返回nil，直接访问style会触发运行时错误。

内容的提问来源于stack exchange，提问作者Shaun Roselt