Element 相关工具方法

setClass

给元素添加 class。允许按照 空格 分割添加多个 class。

import { setClass } from '@/utils'

setClass(document.body, 'class')
setClass(refDom, 'class')
setClass(dom, 'class other-class other-class-2')

removeClass

给元素删除 class。允许按照 空格 分割删除多个 class。

import { removeClass } from '@/utils'

removeClass(document.body, 'class')
removeClass(refDom, 'class')
removeClass(refDom, 'class other-class other-class-2')

hasClass

判断元素是否存在某个 class。允许按照 空格 分割判断多个 class。

import { hasClass } from '@/utils'

hasClass(document.body, 'class') // true
hasClass(refDom, 'class') // true
hasClass(refDom, 'class other-class other-class-2') // true

setStyle

给元素添加 style。允许按照 ; 分割添加多个 style。

import { setStyle } from '@/utils'

setStyle(document.body, 'color: red')
setStyle(refDom, 'color: red')
setStyle(dom, 'color: red; font-size: 16px')
setStyle(dom, { color: 'red', fontSize: '16px' })

removeStyle

删除元素某个或者多个 style。

提示

但是要注意浏览器样式表的兼容性。例如 z-index 与 zIndex。

import { removeStyle } from '@/utils'

removeStyle(document.body, 'color')
removeStyle(refDom, 'color')
removeStyle(dom, ['color', 'font-size'])

colorToRgba

将颜色转换为 rgba 格式。

import { colorToRgba } from '@/utils'

colorToRgba('#fff') // rgba(255, 255, 255, 1)
colorToRgba('#ffffff') // rgba(255, 255, 255, 1)
colorToRgba('rgb(255, 255, 255)') // rgba(255, 255, 255, 1)
colorToRgba('#fff', 0.5) // rgba(255, 255, 255, 0.5)

queryElements

查询元素。允许按照 attr、class、id、tag 进行查询。

import { queryElements } from '@/utils'

queryElements('.demo') // 获取所有 class 为 demo 的元素
queryElements('#demo') // 获取所有 id 为 demo 的元素
queryElements('attr:type=button') // 获取所有 attr 中 type 为 button 的元素
queryElements('attr:type') // 获取所有存在 attr 中 type 的元素

completeSize

不全尺寸。

import { completeSize } from '@/utils'

completeSize(100) // 100px
completeSize('100') // 100px
completeSize('100%') // 100%
completeSize('100vh') // 100vh
completeSize('100vw') // 100vw