尝试在 SharePoint Online SPFx 中使用应用程序定制器隐藏 div答案

【问题标题】：SPFx Application Customizer - hide a <div>尝试在 SharePoint Online SPFx 中使用应用程序定制器隐藏 div
【发布时间】：2022-09-24 00:08:07
【问题描述】：

我编写了一个运行良好的 SPFx 应用程序定制器，我可以使用它登录到控制台。

但是，当我尝试在 SPO 中隐藏页面左上角的“SharePoint”链接时，出现以下错误

谢谢磷

错误：无法创建应用程序定制器 \'ClientSideExtension.ApplicationCustomizer.ab3da44e-81af-4590-9bf3-b305f602265c\'。错误信息是\'Cannot set properties of undefined (setting \'display\')\'。

    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

    let message: string = this.properties.testMessage;
    if (!message) {
      message = \'(No properties were provided.)\';
    }

    // Dialog.alert(`Hello from ${strings.Title}:\\n\\n${message}`).catch(() => {
    //   /* handle error */
    // });

    console.log(\'DefaultApplicationCustomizerApplicationCustomizer onInit...\');

    console.log(\'get homeLink\');
    let homeLink: any = document.getElementsByClassName(\'o365sx-appName\');
    console.log(\'got homeLink\');
    homeLink.style.display = \"none\"; 
    console.log(\'changed homeLink\');

作为对 Nikolay 答案的附加说明：在我看来，最好使用 css 来隐藏 SPO 中的元素（通过代码插入带有 css 的样式标签）。如果 Microsoft 决定更改类名，您的 webpart/应用程序定制器不会中断。如果您想使用 Typescript，请使用类型（而不是任何类型），您会直接在代码中看到问题。它只是不会编译。

标签： typescript sharepoint-online spfx

【解决方案1】：

getElementsByClassName 返回一个列表的元素。你需要第一个：

let homeLink: any = document.getElementsByClassName('o365sx-appName')[0];

【讨论】：

【解决方案2】：

您也可以尝试使用以下代码：

let homeLink: any = document.getElementById("O365_SuiteBranding_container");

或者

let homeLink: any = document.querySelector("div#O365_SuiteBranding_container");

【讨论】：