DOMHelper DOM助手

在 React 项目中,我们不推荐直接操作 DOM , 但是在 RSUITE 组件内部,为了一些考虑不得不直接操作 DOM, 如果您也有类似的需求,可以直接使用这组方法。

获取方法

import { DOMHelper } from 'rsuite';

APIs

class

hasClass: (node: HTMLElement, className: string) => boolean;
addClass: (node: HTMLElement, className: string) => HTMLElement;
removeClass: (node: HTMLElement, className: string) => HTMLElement;
toggleClass: (node: HTMLElement, className: string) => HTMLElement;

style

addStyle: (node: HTMLElement, property: string, value: string) => void;
addStyle: (node: HTMLElement, style: Object) => void;

removeStyle: (node: HTMLElement, property: string) => void;
removeStyle: (node: HTMLElement, propertys: Array<string>) => void;

getStyle: (node: HTMLElement, property: string) => string;
getStyle: (node: HTMLElement) => Object;

events

on: (target: HTMLElement, eventName: string, listener: Function, capture: boolean = false) => {off: Function};
off: (target: HTMLElement, eventName: string, listener: Function, capture: boolean = false) => void;

scroll

scrollLeft: (node: HTMLElement) => number;
scrollLeft: (node: HTMLElement, value: number) => void;

scrollTop: (node: HTMLElement) => number;
scrollTop: (node: HTMLElement, value: number) => void;

query

getHeight: (node: HTMLElement, client: HTMLElement) => number;
getWidth: (node: HTMLElement, client: HTMLElement) => number;
getOffset: (node: HTMLElement) => Object;
getOffsetParent: (node: HTMLElement) => HTMLElement;
getPosition: (node: HTMLElement, offsetParent: HTMLElement) => Object;
contains: (context: HTMLElement, node: HTMLElement) => boolean;

DOMMouseMoveTracker

Mouse drag tracker

new DOMMouseMoveTracker(
  onMove:(deltaX: number, deltaY: number, moveEvent: Object) => void,
  onMoveEnd:() => void,
  container: HTMLElement
);
Vercel banner