class.md

<script setup> import { useAddNumInOutlineLabel } from '../../.vitepress/utils/createElement.ts' useAddNumInOutlineLabel(5) import hasClass from './hasClass.vue' import getClass from './getClass.vue' import addClass from './addClass.vue' import removeClass from './removeClass.vue' import toggleClass from './toggleClass.vue' </script>

::: tip 支持任意运行在浏览器的 JavaScript 语言 处理元素类名 :::

hasClass

判断元素是否存在指定类名

{#base1}

查看代码

<<< @/utils/class/hasClass.vue

{#param1}

接收两个参数，第一个参数 element ，第二个参数 name ，返回值类型 boolean

参数属性	说明	类型
element	当前类名的元素	HTMLElement/Element
name	类名	string

getClass

获取当前元素的所有类名

{#base2}

查看代码

<<< @/utils/class/getClass.vue

{#param2}

接收一个参数 element ，返回值类型 string | string[]

参数属性	说明	类型
element	当前元素	HTMLElement/Element

addClass

向当前元素添加指定类名

{#base3}

查看代码

<<< @/utils/class/addClass.vue

{#param3}

接收三个参数，第一个参数 element ，第二个参数 name ，第三个参数 extraName ，无返回值

参数属性	说明	类型
element	当前元素	HTMLElement/Element
name	类名	string
extraName	额外类名（ 可选 ）	string

removeClass

删除当前元素的指定类名

{#base4}

查看代码

<<< @/utils/class/removeClass.vue

{#param4}

接收三个参数，第一个参数 element ，第二个参数 name ，第三个参数 extraName ，无返回值

参数属性	说明	类型
element	当前元素	HTMLElement/Element
name	类名	string
extraName	额外类名（ 可选 ）	string

toggleClass

是否向当前元素添加指定类名

{#base5}

查看代码

<<< @/utils/class/toggleClass.vue

{#param5}

接收三个参数，第一个参数 bool ，第二个参数 name ，第三个参数 element ，无返回值

参数属性	说明	类型
bool	是否向当前元素添加指定类名	boolean
name	类名	string
element	当前元素（ 可选 ，如果不填，默认 document.body ）	HTMLElement/Element

::: info 提示信息 在基础用法的示例中，通过右键检查元素，可观察元素变化 :::