添加 CSS 类

在前端开发过程中，我们经常需要对 HTML 元素添加或删除 CSS 类来实现样式的控制。这里介绍几种常见的添加 CSS 类的方法。

1.使用原生 JavaScript

使用原生 JavaScript 可以通过 classList 属性实现添加、删除、切换、包含等操作。

添加 CSS 类

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

删除 CSS 类

const element = document.getElementById('myElement');
element.classList.remove('myClass');

切换 CSS 类

const element = document.getElementById('myElement');
element.classList.toggle('myClass');

判断是否包含 CSS 类

const element = document.getElementById('myElement');
if (element.classList.contains('myClass')) {
  // do something
}

2.jQuery

使用 jQuery 可以通过 addClass、removeClass、toggleClass 方法实现添加、删除、切换 CSS 类。

添加 CSS 类

$('#myElement').addClass('myClass');

删除 CSS 类

$('#myElement').removeClass('myClass');

切换 CSS 类

$('#myElement').toggleClass('myClass');

3.React

在 React 中，可以使用 className 属性实现添加 CSS 类。

添加 CSS 类

function MyComponent() {
  return <div className="myClass">Hello World!</div>;
}

4.Angular

在 Angular 中，可以通过指令的方式实现添加、删除、切换 CSS 类。

添加 CSS 类

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[myClass]'
})
export class MyClassDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.classList.add('myClass');
  }
}

删除 CSS 类

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[myClass]'
})
export class MyClassDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.classList.remove('myClass');
  }
}

切换 CSS 类

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[myClass]'
})
export class MyClassDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.classList.toggle('myClass');
  }
}