При работе с TypeScript и манипулировании DOM вам часто может потребоваться динамическое добавление класса к элементу HTML. Динамическое добавление класса позволяет применять стили или поведение к конкретным элементам в зависимости от определенных условий. В этой статье мы рассмотрим несколько методов добавления класса к элементу в TypeScript с примерами кода.

Метод 1: использование свойства classList

const element = document.getElementById("myElement");
element.classList.add("myClass");

Метод 2. Использование свойства className

const element = document.getElementById("myElement");
element.className += " myClass";

Метод 3. Использование метода setAttribute

const element = document.getElementById("myElement");
element.setAttribute("class", "myClass");

Метод 4. Использование свойства класса

const element = document.getElementById("myElement");
(element as any).class = "myClass";

Метод 5. Использование свойства стиля

const element = document.getElementById("myElement");
element.style.className = "myClass";

Метод 6. Использование библиотеки jQuery

import * as $ from "jquery";
$("#myElement").addClass("myClass");

Метод 7. Использование служебной функции

function addClass(element: HTMLElement, className: string) {
  if (!element.classList.contains(className)) {
    element.classList.add(className);
  }
}
const element = document.getElementById("myElement");
addClass(element, "myClass");

Метод 8. Использование служебной библиотеки, например lodash

import * as _ from "lodash";
const element = document.getElementById("myElement");
_.addClass(element, "myClass");

Метод 9: использование такой среды, как React

import React from "react";
function MyComponent() {
  return <div className="myClass">Hello, World!</div>;
}

Метод 10. Использование такой платформы, как Angular

import { Component } from "@angular/core";
@Component({
  selector: "my-component",
  template: `<div [class]="'myClass'">Hello, World!</div>`,
})
export class MyComponent {}

В этой статье мы рассмотрели десять различных методов добавления класса к элементу в TypeScript. Эти методы предоставляют различные варианты в зависимости от библиотек или платформ, которые вы используете в своем проекте. Независимо от того, работаете ли вы с ванильным JavaScript, jQuery, служебными библиотеками или популярными платформами, такими как React и Angular, в вашем распоряжении целый ряд методов. Выберите метод, который лучше всего соответствует требованиям вашего проекта и стилю кодирования, чтобы динамически добавлять классы к элементам HTML в TypeScript.