element-measurer
TypeScript icon, indicating that this package has built-in type declarations

1.4.5 • Public • Published

ElementMeasurer

Build Status npm version Downloads

A javascript class that provides convenience for measuring size to target such as element or document.

Install

npm install element-measurer

Usage

import ElementMeasurer from 'element-measurer';

// Measures on an element.
// target: HTMLElement | 'selector' | document | window
const targetSize = new ElementMeasurer('#target');
let max = targetSize.maxScrollTop; // get maxScrollTop.

// Measures on the whole Document.
const docSize = new ElementMeasurer();
docSize.scrollTop = 200; // set scrollTop.

API

Image: element-and-client

Properties

  • clientWidth: ReadOnly Returns inner width of an element in pixels.
  • clientHeight: ReadOnly Returns inner height of an element in pixels.
  • scrollTop: Gets or sets of pixels that an element's content is scrolled vertically.
  • scrollLeft: Gets or sets the number of pixels that an element's content is scrolled to the left.
  • scrollWidth: ReadOnly Returns the width of the entire content of an element.
  • scrollHeight: ReadOnly Returns the height of the entire content of an element.
  • maxScrollTop: ReadOnly Returns maximum top scroll offset possible for the element.
  • maxScrollLeft: ReadOnly Returns maximum left scroll offset possible for the element.

Methods

setTarget

Set target element.

Syntax

elementMeasurer.setTarget(target);
  • @param Element|String|Window|Document target
  • @returns ElementMeasurer

getOffset

Returns top and left values that indicates offset distance to html document.

Syntax

let obj = elementMeasurer.getOffset();
  • @returns Object { top, left }

getRect

Returns DOMRect object of the target element.

Syntax

let domRect = elementMeasurer.getRect();

License

MIT License

Readme

Keywords

Package Sidebar

Install

npm i element-measurer

Weekly Downloads

0

Version

1.4.5

License

MIT

Unpacked Size

60.8 kB

Total Files

21

Last publish

Collaborators

  • archco