UNPKG

@speaker-ender/js-measure

Version:

DOM Measurement Tools

github.com/speaker-ender/JS-Measure

speaker-ender/JS-Measure

63 lines (44 loc) • 3.46 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
# JS-Measure ### [DEMO](https://js-measure.vercel.app) ### JS DOM Measurement Tools Provides safe cross-browser support for fetching measurments about DOM elements ## Functions ### `documentHeight()` Fetches the maximum height of your webpage by using the document body and the html element. Returns `0` if the document or html element do not exist. ### `windowWidth()` Fetches the width of the window. Returns `0` if the window and document element do not exist ### `windowHeight()` Fetches the height of the window. Returns `0` if the window and document element do not exist ### `scrollTopDistance()` Fetches the distance of the viewport from the top of the page. Returns `0` if the window and document element do not exist ### `scrollLeftDistance(element)` Fetches the distance of the viewport from the left of the page or the distance of the left side of `element` from the left side of the viewport. Returns `0` if the window and document element do not exist ### `height(element, includeMargin)` Fetches the height of the element passed to the function. The second parameter can be used to fetch the total height with any margins ### `rawHeight(element)` This is the raw height function for maximum performance ### `rawHeightWithMargin(element)` This is the raw height with margin function for maximum performance ### `width(element, includeMargin)` Fetches the width of the element passed to the function The second parameter can be used to fetch the total width with any margins ### `rawWidth(element)` This is the raw height function for maximum performance ### `rawWidthWithMargin(element)` This is the raw width with margin function for maximum performance ### `topEdgeDistance(element: Element, relativeTo?: 'document' | Element)` Fetches the distance of the top of the element passed to the function from the top of the viewport. If `relativeTo` is passed `document`, it will use the distance from the top of the document. If you pass any Element to `relativeTo`, it will return the distance between the top of `element` and the top of `relativeTo`. ### `bottomEdgeDistance(element: Element, relativeTo?: 'document' | Element)` Fetches the distance of the bottom of the element passed to the function from the top of the viewport. If `relativeTo` is passed `document`, it will use the distance from the top of the document. If you pass any Element to `relativeTo`, it will return the distance between the bottom of `element` and the bottom of `relativeTo`. ### `leftEdgeDistance(element: Element, relativeTo?: 'document' | Element)` Fetches the distance of the left edge of the element passed to the function from the left of the viewport. If `relativeTo` is passed `document`, it will use the distance from the left of the document. If you pass any Element to `relativeTo`, it will return the distance between the left edge of `element` and the left edge of `relativeTo`. ### `rightEdgeDistance(element: Element, relativeTo?: 'document' | Element)` Fetches the distance of the right edge of the element passed to the function from the right of the viewport. If `relativeTo` is passed `document`, it will use the distance from the right of the document. If you pass any Element to `relativeTo`, it will return the distance between the right edge of `element` and the right edge of `relativeTo`. ### `inViewport(element)` Returns `true` if all edges of the element passed to the function are inside of the viewport