dom工具类 - ikDomUtil

操纵dom元素的一些方法

导入方式

import { ikDomUtil } from 'iking-utils'

getBoundingClientRect

方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

如果返回的是0，则是不存在该dom元素

tgetBoundingClientRect(element: Element): DOMRect | number {}

参数说明

参数值	类型	参数值说明
element	Element	dom元素

示例

  const dom = ikDomUtil.getBoundingClientRect(document.getElementById('addbtn'))
  <!-- console.log(dom) -->
  DOMRect: {
    bottom: 160.5,
    height: 40,
    left: 1642,
    right: 1730,
    top: 120.5,
    width: 88,
    x: 1642,
    y: 120.5,
  }

hasClass

判断dom元素选择器是否含有传递值的选择器名称， 返回值为Boolean类型

hasClass(element: Element, Cls: string)

参数说明

参数值	类型	参数值说明
element	Element	dom元素
Cls	String	选择器名称

示例

  const domHasClass = ikDomUtil.hasClass(document.getElementById('addbtn'), 'el-button--primary')
  <!-- console.log(domHasClass) -->
  true

addClass

给dom元素添加选择器

addClass(element: Element, Cls: string)

参数说明

参数值	类型	参数值说明
element	Element	dom元素
Cls	String	选择器名称

示例

  ikDomUtil.addClass(document.getElementById('addbtn'), 'add-btn')

removeClass

移除dom元素的选择器

removeClass(element: Element, Cls: string)

参数说明

参数值	类型	参数值说明
element	Element	dom元素
Cls	String	选择器名称

示例

  ikDomUtil.removeClass(document.getElementById('addbtn'), 'add-btn')

getViewportOffset

获取视图端口偏移量

getViewportOffset(element: Element)

参数说明

参数值	类型	参数值说明
element	Element	dom元素

示例

  const domOffset = 
    ikDomUtil.getViewportOffset(document.getElementById('addbtn'))
  <!-- console.log(domOffset) -->
  /**
  {
    bottom: 425.5,
    bottomIncludeBody: 465.5,
    left: 1642,
    right: 190,
    rightIncludeBody: 278,
    top: 120.5,
  }
  **/

hackCss

返回兼容各个浏览器的css样式属性及对应值

hackCss(attr: string, value: string)

参数说明

参数值	类型	参数值说明
attr	string	css样式属性名称
value	string	css样式属性值

示例

  const domstyle = ikDomUtil.hackCss('font-size', '18px')
  <!-- console.log(domstyle) -->
  /**
  {
    MozFont-size: "18px",
    OTFont-size: "18px",
    font-size: "18px",
    msFont-size: "18px",
    webkitFont-size: "18px",
  }
  **/

on

给dom元素添加监听事件

on(element: Element | HTMLElement | Document | Window,
  event: string,
  handler: EventListenerOrEventListenerObject):void

参数说明

参数值	类型	参数值说明
element	Element | HTMLElement | Document | Window	dom元素
event	string	监听事件名称
handler	EventListenerOrEventListenerObject	绑定函数

示例

  const fun = () => {}
const addDom = document.getElementById('addbtn')
ikDomUtil.on(addDom, 'click', fun)

off

给dom元素移除监听事件

  off(element: Element | HTMLElement | Document | Window,
event: string,
handler: Fn):void

参数说明

参数值	类型	参数值说明
element	Element | HTMLElement | Document | Window	dom元素
event	string	事件名称
handler	Fn	绑定函数

示例

    const offFun = () => {}
  const addDom = document.getElementById('addbtn')
  ikDomUtil.off(addDom, 'click', offFun)

once

将事件监听器附加到只触发一次的元素上。

once(el: HTMLElement, event: string, fn: EventListener):void

参数说明

参数值	类型	参数值说明
element	HTMLElement	dom元素
event	string	事件名称
fn	EventListener	监听事件

示例

  const onceFun = () => {}
const addDom = document.getElementById('addbtn')
ikDomUtil.once(addDom, 'click', onceFun)

useRafThrottle

这个函数用于限制基于requestAnimationFrame API的函数调用。它接受一个函数作为参数，并返回一个新函数，该函数在每个动画帧中只执行原始函数一次。这对于处理可能快速触发的事件(如滚动或调整大小)时的性能优化非常有用。该函数设置一个锁定标志，以防止在同一动画帧中执行多个调用。一旦动画帧完成，标志被重置，函数可以再次调用。

useRafThrottle<T extends FunctionArgs>(fn: T)

参数说明

参数值	类型	参数值说明
fn	T	函数

示例

  const fun = () => {}
ikDomUtil.useRafThrottle(fun)