super-tools-lib - v1.74.0 / Modules / dom

Module: dom ​

Table of contents ​

Functions ​

• addClass
• classnames
• eleReplace
• getAttr
• getDomBound
• getOffset
• getSelectedText
• getTransformMatrix
• hasClass
• insertAfter
• insertBefore
• insertHtmlAfter
• insertHtmlBefore
• removeClass
• replaceClass
• scrollToTheBottom
• setAttr
• shaking
• stopPropagation
• textVisibilityChange

Functions ​

addClass ​

▸ addClass(ele, className): void

添加类名

Since

1.0.0

Example

import { addClass } from 'super-tools-lib'

addClass('dom', 'active')

Parameters ​

Returns ​

void

classnames ​

▸ classnames(...args): string

返回一个字符串，其中包含所有非空参数的类名，这些参数可以是字符串或对象。

Example

import { classnames } from 'super-tools-lib'

classnames('foo', 'bar'); // 'foo bar'

classnames('foo', { bar: true }); // 'foo bar'

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `...args` | `any`[] | 一个包含类名的数组 |

#### Returns

`string`

返回一个类名字符串

___

### eleReplace

▸ **eleReplace**(`oldEle`, `newEle`): `void`

替换dom元素

**`Since`**

1.62.0

**`Example`**

```ts
import { eleReplace } from 'super-tools-lib'

eleReplace(dom1, dom2)

Parameters ​

Returns ​

void

getAttr ​

▸ getAttr(element, attrName): string

用于获取元素的属性值

Since

1.62.0

Example

import { getAttr } from 'super-tools-lib'

getAttr(dom1, 'id')

Parameters ​

Returns ​

string

返回属性值

getDomBound ​

▸ getDomBound(elem, flag?): { bottom: number = box.bottom; left: number = box.left; right: number = box.right; top: number = box.top } | { x: number = box.left; y: number = box.top }[]

获取dom四个角的坐标 返回数组[{x,y}] | {top, left, right, bottom}格式

Since

1.62.0

Example

import { getDomBound } from 'super-tools-lib'

const dom = document.getElementById('test')

getDomBound(dom)
// => [{x: 0, y: 0}, {x: 100, y: 0}, {x: 100, y: 100}, {x: 0, y: 100}}]

Parameters ​

Returns ​

{ bottom: number = box.bottom; left: number = box.left; right: number = box.right; top: number = box.top } | { x: number = box.left; y: number = box.top }[]

返回数组[{x,y}] | {top, left, right, bottom}格式

getOffset ​

▸ getOffset(ele): Object

获取一个元素距离浏览器左上角的偏移量

Since

1.0.0

Example

import { getOffset } from 'super-tools-lib'

getOffset(ele) // { left: 0, top: 20 }

Parameters ​

Returns ​

Object

返回元素距离浏览器左上角的偏移量

getSelectedText ​

▸ getSelectedText(): string

获取鼠标所选文本

Since

1.62.0

Example

import { getSelectedText } from 'super-tools-lib'

getSelectedText() // 1111

Returns ​

string

返回鼠标选择的文本

getTransformMatrix ​

▸ getTransformMatrix(transform): Object

获取transform translate矩阵中x，y坐标

Since

1.62.0

Example

import { getTransformMatrix } from 'super-tools-lib'

getTransformMatrix('translate(10px, 10px)') // { x: 10, y: 10 }

Parameters ​

Returns ​

Object

返回x,y坐标

hasClass ​

▸ hasClass(element, className): boolean

判断元素是否包含某个class

Since

1.0.0

Example

import { hasClass } from 'super-tools-lib'

hasClass(dom, 'active') // false

Parameters ​

Returns ​

boolean

返回true / false

insertAfter ​

▸ insertAfter(anotherEle, newEle): void

在目标元素之后插入一个新元素

Since

1.62.0

Example

import { insertAfter } from 'super-tools-lib'

insertAfter(dom1, dom2)

Parameters ​

Returns ​

void

insertBefore ​

▸ insertBefore(anotherEle, newEle): void

在目标元素之前插入一个新元素

Since

1.62.0

Example

import { insertAfter } from 'super-tools-lib'

insertAfter(dom1, dom2)

Parameters ​

Returns ​

void

insertHtmlAfter ​

▸ insertHtmlAfter(ele, html): void

在元素后插入给定的HTML

Since

1.62.0

Example

import { insertHtmlAfter } from 'super-tools-lib'

insertHtmlAfter(dom1, '<div></div>')

Parameters ​

Returns ​

void

insertHtmlBefore ​

▸ insertHtmlBefore(ele, html): void

在元素前插入给定的HTML

Since

1.62.0

Example

import { insertHtmlBefore } from 'super-tools-lib'

insertHtmlBefore(dom1, '<div></div>')

Parameters ​

Returns ​

void

removeClass ​

▸ removeClass(ele, className): void

删除类名

Since

1.0.0

Example

import { removeClass } from 'super-tools-lib'

removeClass(dom, 'active')

Parameters ​

Returns ​

void

replaceClass ​

▸ replaceClass(ele, newName, oldName): void

替换类名

Since

1.0.0

Example

import { replaceClass } from 'super-tools-lib'

replaceClass(dom, 'active', 'oldName')

Parameters ​

Returns ​

void

scrollToTheBottom ​

▸ scrollToTheBottom(ele, callback, dis?, delay?): void

监听滚动条滚动到底部

Since

1.62.0

Example

import { scrollToTheBottom } from 'super-tools-lib'

scrollToTheBottom(dom, () => {
 console.log('到底部啦')
})

Parameters ​

Returns ​

void

setAttr ​

▸ setAttr(element, attrName, value): void

用于设置元素的属性值

Since

1.62.0

Example

import { setAttr } from 'super-tools-lib'

setAttr(dom1, 'id', 'box')

Parameters ​

Returns ​

void

shaking ​

▸ shaking(params): void

抖动函数

Since

1.0.0

Example

import { shaking } from 'super-tools-lib'

shaking({ele: dom, attr: 'left' })

Parameters ​

Returns ​

void

stopPropagation ​

▸ stopPropagation(e): void

阻止冒泡事件

Since

1.0.0

Example

import { stopPropagation } from 'super-tools-lib'

stopPropagation(dom)

Parameters ​

Returns ​

void

textVisibilityChange ​

▸ textVisibilityChange(dom): boolean

计算文字是否溢出容器

Since

1.62.0

Example

import { textVisibilityChange } from 'super-tools-lib'

textVisibilityChange(textDom) // true

Parameters ​

Returns ​

boolean

返回 true / false