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

Explanation

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

Basic Usage

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

Change a property's value

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

Get a property value

box.style.height // returns 200px

Set property value with a function

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

Transition end event

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

Browser Support

Basic Demo was tested on:

• iPod/Ipad Touch Safari iOS 9.0.2
• Moto X 2013 Chrome 43
• Firefox 41.0.1 OSX
• Safari Version 9.0 (10601.1.56.2) OSX
• Chrome Version 46.0.2490.71 (64-bit) OSX
• Internet Explorer 10 - Windows 8 Virtual Box