https://github.com/chemzqm/style

style component for high performance javascript animation
https://github.com/chemzqm/style

Last synced: about 1 month ago
JSON representation

style component for high performance javascript animation

• Host: GitHub
• URL: https://github.com/chemzqm/style
• Owner: chemzqm
• Created: 2014-06-04T03:01:54.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-03-12T19:46:28.000Z (almost 9 years ago)
• Last Synced: 2024-10-29T12:30:55.182Z (about 2 months ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# Style

Get and set css stylies easier.

You can get computed style value (for transform properties from styles).

``` js

var style = require('style');

style(el).get('rotateX'); // 60 return numberic properties as number

```

To get the number css property, it should be ended with `px` or it's a tranform property.

You can set css with object.

``` js

var style = require('style');

style(el).set( {

  rotate: 60,

  top: -10

});

```

number properties will be suffixed with `px`.

**note**, to gain better performance while scrolling (get styles would cause a reflow), other transform properties will not be preserved!

## API

### style(el | els)

Init with node or nodeList.

### .get(prop)

Get style with css property name. Property name could be javascript style property or properties from `getComputedStyle`.

It should be prefixed if prop name is javascript style property.

It return number if prop is number property.

### .set(props)

Set styles with object, number values is automaticly suffixed.