Javascript 如何在不使用Jquery-6的情况下向DOM元素添加类

目前，我已通过引导定义了我的组件的以下模板：

<div class="container">

  <div class="row my-4">
    <div class="col-md-12 d-flex justify-content-center">
      <h2> EVALUACIÓN DE {{ curso }} </h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-9">
      <h4>Pregunta 1 de 20 </h4>
      <p>¿Cúal de las siguientes alternativas es correcta? </p>
    </div>
    <div class="col-md-3 d-flex align-items-center" id="icono-reloj">
      <img class="mx-2" src="/assets/img/alarm-fill.svg" alt="" width="24" height="24" title="timer"> <span class="mx-3">0:20</span>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" ngFor="let alternativa of alternativas">
        <p class="list-group-item list-group-item-action" (click)="avanzar()">este es un ejemplo de una alternativa ...</p>
      </div>
    </div>
  </div> 
</div>

评估{{curso}
Pregunta 1 de 20
你认为这是正确的吗

0:20

我想实现的是，当浏览器屏幕缩小到767.98px以下时，它将使问题行居中

据我所知，这将通过jquery实现，但不再推荐。此外，我还了解到理想情况是使用类“Renderer2”，因此我的查询是：

Renderr2文档的这一部分将允许我感知屏幕大小，因为在某种程度上，必须有一种媒体查询来检测屏幕小于767.98px的时间，然后添加我定义的引导类，以便我希望关注的div。

函数windowResizeFunc（）{
函数reportWindowsSize（）{
设h=窗内高度；
设w=窗宽；
控制台日志（“当前宽度：+w”）；
如果（w<600）{
document.getElementById（“yourElementId”）.classList.add（“中心”）；
}否则{
document.getElementById（“yourElementId”）.classList.remove（“中心”）；
}
}
window.onresize=reportWindowSize；
}
windowResizeFunc（）
#您的元素ID{
边框：1px实心#5599cc；
}
.center{
文本对齐：居中；
}
一些文本
如果您正在寻找角度解决方案，具体如下：

import {
  Component,
  OnInit,
  HostListener,
  ViewChild,
  ElementRef,
} from "@angular/core";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.scss"],
})
export class HeaderComponent implements OnInit {
  currentWindowWidth: number;
  isMobile: boolean;

  @ViewChild("control") control: ElementRef;

  constructor() {}

  ngOnInit() {}

  @HostListener("window:resize", ["$event"])
  public onResize(window) {
    this.isMobile = window.currentTarget.innerWidth < 993 ? true : false;
    this.toggleMobileClasses(this.control.nativeElement, this.isMobile)
  }

  @HostListener("window:load", ["$event"])
  public onLoad(window) {
    this.isMobile = window.currentTarget.innerWidth < 993 ? true : false;
  }

  toggleMobileClasses(targetElement: HTMLElement, isMobile) {
    isMobile ? targetElement.classList.add('text-center') : targetElement.classList.toggle('text-center');
  }

}


导入{
组成部分，
奥尼特，
主持人：，
ViewChild，
ElementRef，
}从“@角度/核心”；
@组成部分({
选择器：“应用程序标题”，
templateUrl:“./header.component.html”，
样式URL:[“/header.component.scss”]，
})
导出类HeaderComponent在Init上实现{
currentWindowWidth：数字；
isMobile：布尔；
@ViewChild（“控件”）控件：ElementRef；
构造函数（）{}
ngOnInit（）{}
@HostListener（“窗口：调整大小”[“$event”]）
公共大小调整（窗口）{
this.isMobile=window.currentTarget.innerWidth<993？真：假；
this.toggleMobileClasses（this.control.nativeElement，this.isMobile）
}
@HostListener（“窗口：加载”[“$event”]）
公共加载（窗口）{
this.isMobile=window.currentTarget.innerWidth<993？真：假；
}
toggleMobileClasses（targetElement:HtmleElement，isMobile）{
isMobile？targetElement.classList.add（'text-center'）：targetElement.classList.toggle（'text-center'）；
}
}

HostListener是这里的关键

声明要侦听的DOM事件，并提供在该事件发生时运行的处理程序方法的装饰程序。


评估{{curso}
Pregunta 1 de 20
你认为这是正确的吗

0:20


另外，如果您对SSR使用Angular Universal，这种方法不会在服务器解析和填充动态HTML期间抛出任何关于
未定义窗口的错误

<div #control class="container">

  <div class="row my-4">
    <div class="col-md-12 d-flex justify-content-center">
      <h2> EVALUACIÓN DE {{ curso }} </h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-9">
      <h4>Pregunta 1 de 20 </h4>
      <p>¿Cúal de las siguientes alternativas es correcta? </p>
    </div>
    <div class="col-md-3 d-flex align-items-center" id="icono-reloj">
      <img class="mx-2" src="/assets/img/alarm-fill.svg" alt="" width="24" height="24" title="timer"> <span class="mx-3">0:20</span>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" ngFor="let alternativa of alternativas">
        <p class="list-group-item list-group-item-action" (click)="avanzar()">este es un ejemplo de una alternativa ...</p>
      </div>
    </div>
  </div> 
</div>