CSSOM-Query

Dynamically find CSS Selector into style sheets and manipulate selector's styles without touching the DOM

Examples

Basic Demo
Header Natural Scroll - codepen - full screen mode

The header is fixed and it only show and hide when it changes it's top property in the scroll events
Transition End Example

clone this repository and run the commands bellow to launch the examples

npm install

npm start

Imagene you only have this in your style sheet, in the file /example/demo.css

h1 {
  color: red;
}

.box {
  height: 100px
}

And this is the only one style sheet linked into your HTML checkout /example.index.html#L07

Once elements is renderized with this styles, you can manipulate then by doing

document.styleSheets[0].cssRules[1].style.height = '200px'

What this function helps me, is to find out the styleSheets[0] index and cssRules[1].

So I can focus only on the rule I want to manipulate

// It does not select elements into the DOM
var box = new CSSOMQuery('.box')

box.set({
  height: '200px'
})

box.style.height // returns 200px

box.set({
  height: function (currentValue) {
    console.log('height current value ', currentValue)
    return '200px'
  }
})

TODO: Would be great the currentValue to be a parsed object, it currently return strings

It will use vendor prefixes automatically

box.on('transitionend', showMessage)

function showMessage(e) {
  console.log('transition end: ', e.propertyName)
}

To know more, search for CSS Object Model

Basic Demo was tested on: