https://github.com/fabiospampinato/css-eval
Tiny library for fully evaluating CSS properties and variables on a target element.
https://github.com/fabiospampinato/css-eval
css eval resolve
Last synced: 7 months ago
JSON representation
Tiny library for fully evaluating CSS properties and variables on a target element.
- Host: GitHub
- URL: https://github.com/fabiospampinato/css-eval
- Owner: fabiospampinato
- License: mit
- Created: 2022-09-16T20:16:30.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-09-24T16:28:48.000Z (over 2 years ago)
- Last Synced: 2024-11-13T13:35:55.417Z (over 1 year ago)
- Topics: css, eval, resolve
- Language: TypeScript
- Homepage:
- Size: 9.77 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# CSS Eval
Tiny library for fully evaluating CSS properties and variables on a target element.
## Install
```sh
npm install css-eval
```
## Usage
The following functions are provided:
```ts
function get ( property: string, target: HTMLElement | SVGElement | MathMLElement = document.body ): string;
function getAngle ( property: string, target: HTMLElement | SVGElement | MathMLElement = document.body ): number;
function getLength ( property: string, target: HTMLElement | SVGElement | MathMLElement = document.body ): number;
function getTime ( property: string, target: HTMLElement | SVGElement | MathMLElement = document.body ): number;
```
They can be used like this:
```ts
import Eval from 'css-eval';
// Getting a custom target node, otherwise it'll be "document.body" if one is not manually provided
const target = document.querySelector ( '#foo' );
// Reading an unresolved style property or variable, as a string
Eval.get ( 'width' );
Eval.get ( 'width', target );
Eval.get ( '--custom' );
Eval.get ( '--custom', target );
// Reading a resolved angle property or variable, the number of "deg" will be returned
Eval.getAngle ( 'rotate' );
Eval.getAngle ( 'rotate', target );
Eval.getAngle ( '--custom' );
Eval.getAngle ( '--custom', target );
// Reading a resolved length property or variable, the number of "px" will be returned
Eval.getLength ( 'width' );
Eval.getLength ( 'width', target );
Eval.getLength ( '--custom' );
Eval.getLength ( '--custom', target );
// Reading a resolved time property or variable, the number of "ms" will be returned
Eval.getTime ( 'transition-duration' );
Eval.getTime ( 'transition-duration', target );
Eval.getTime ( '--custom' );
Eval.getTime ( '--custom', target );
```
## License
MIT © Fabio Spampinato