DOM 元素尺寸监听器 size-sensor

码农软件 · 软件分类 · 常用JavaScript包 · 2019-04-04 14:43:51

软件介绍

size-sensor

DOM element size sensor which will callback when the element size changed.

DOM 元素尺寸监听器,当元素尺寸变化的时候,将会触发回调函数!

安装

npm i --save size-sensor

import { bind, clear } from 'size-sensor';

或者使用 script 引入,将得到一个全局变量 sizeSensor.


使用

  • bind & unbind

import { bind, clear } from 'size-sensor';

// bind the event on element, will get the `unbind` function
const unbind1 = bind(document.querySelector('.container'), element => {
  // do what you want to to.
});

const unbind2 = bind(document.querySelector('.container'), element => {
  // do what you want to to.
});

// if you want to cancel bind event.
unbind1();
  • clear

import { bind, clear } from 'size-sensor';

/*
 * // bind the resize event.
 * const unbind1 = bind(...);
 * const unbind2 = bind(...);
 * ...
 */

// you can cancel all the event of element.
clear(element);

API

只有 2 API:

  • bind(element, callback)

绑定一个 reisze 监听方法到 DOM 元素上,调用直接返回 unbind 方法。

  • clear(element)

清楚 DOM 元素上的所有 resize 监听器函数。

Reference

Online demo click here. Rewrite from KyleAMathews/element-resize-event, will be used on hustcc/echarts-for-react.

License

ISC@hustcc.

本文地址:https://www.codercto.com/soft/d/2846.html

精通CSS

精通CSS

Andy Budd / 陈剑瓯 / 人民邮电出版社 / 2006 / 39.00

本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复,最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员,将书中讨论的许多技术组合起来,给出了两个实例研究。本书......一起来看看 《精通CSS》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具