A jQuery-alternative for retrieving info about rendered DOM nodes.
Most UI frameworks provide a mechanism for maintaining state, so we no longer need to store state in the DOM like we did when all we had was jQuery. Furthermore, with modern UI libraries such as React, we also no longer need to manually update DOM nodes because we can re-render the entire DOM as a function of the updated state.
As a result, DOM libraries like jQuery, zepto.js, and others others feel even more bloated because they are filled with methods we no longer need. The only functions we do need are those that retrieve properties of DOM nodes that are the result of their render in the browser (e.g. dimensions, positions, etc.). These properties cannot be known prior to rendering.
dom-info, derived from various modules in the the open-source UIZE JavaScript Framework, is a lightweight alternative that only provides these utility functions. These functions are separated into individual modules so you can only include the ones you need.
Install via Yarn:
yarn add dom-infoInstall via NPM:
npm install --save dom-infoUse with webpack or browserify:
import * as domInfo from 'dom-info'; // ES6+
var domInfo = require('dom-info'); // ES5As a last resort, you can download dist/dom-info.min.js and include it on your web page via a <script> tag. It will create a global window.domInfo object (or define the module if you are using RequireJS):
<script src="/lib/dom-info.min.js" type="text/javascript"></script>getDimensions- Gets the computed pixel dimensions for the specified DOM node, includingpadding,border, and optionallymargin.getStyle- Returns the value of the specified style property (or style properties) for the specified node.supportsStyle- Returns whether or not the specified CSS property is supported in the current browser.
Check out the docs for more examples or try out dom-info in your browser!
dom-info has been tested in Internet Explorer 9+, Chrome, Firefox, Safari, Opera and Edge. Some functionality may also work in older browsers, but is unsupported.
We take the stability of this utility package very seriously. dom-info follows the SemVer standard for versioning. All updates must also keep the library lightweight by providing each piece of functionality in a separate module.
Contributions are welcome! See CONTRIBUTING for more details.
MIT. Copyright (c) 2016-2017 Ben Ilegbodu.