如何在 SAPUI5 中为页面中的每个 DOM 对象更改 css

Question

我有一个事物检查员，这个事物检查员有两个头衔。 我希望能够更改此标题上的 css 并使它们的字体大小更小（默认 fontSize 为 16px，我想将其降至 12px）。 我尝试获取这些标题类并使用此方法更改它们的大小：

var element = document
                    .getElementsByClassName("sapUiUx3TVTitleSecond")[1];
            element.style.fontSize = '12px';
var element = document
                    .getElementsByClassName("sapUiUx3TVTitleFirst")[1];
            element.style.fontSize = '12px';

它确实有效，我可以看到更改，但是一旦页面完成加载（页面加载需要几秒钟，因为它需要读取 json 对象）标题大小将恢复为默认值。 我什至不知道这是访问 DOM 元素并更改其 CSS 的正确方法。

请为我指出如何在 SAPUI5 中更改 DOM 对象 css 的正确方向

Answer 1

您可以创建一个包含在 index.html 中的新 CSS 文件。

只需在此自定义 CSS 中添加具有修改属性的所需选择器：

.sapUiUx3TVTitleSecond, .sapUiUx3TVTitleFirst {
    font-size : 12px;
}

编辑：如果您需要以编程方式更改它，您可以使用适用于每个 UI 元素的 addStyleClass("yourStyle") 方法

Answer 2

在 dom 完全加载后执行脚本。 像这样尝试

$("document").ready(function()
{

  var element = document
                .getElementsByClassName("sapUiUx3TVTitleSecond")[1];
        element.style.fontSize = '12px';
      var element = document
                .getElementsByClassName("sapUiUx3TVTitleFirst")[1];
        element.style.fontSize = '12px';   
})

Answer 3

$("document").ready(function()
{
       $(".sapUiUx3TVTitleSecond").css("font-size","12px");   
})