Follow-up on vendor-specific CSS and the DOM

Yesterday I wrote about my difficulty in getting certain CSS properties that I needed for my code. Today I discovered the solution.

After unsuccessfully poking around at a simplified version of my code, I decided to try looking at the complete list of the relevant element’s DOM properties, to see if I was simply asking for the wrong thing. I quickly discovered that element.style doesn’t give back an array; instead, it gives a CSSStyleDeclaration.

This wasn’t much use, so instead I went to the ever-helpful DOM reference provided by Mozilla. I hopped to the reference for element.style, and from there to window.getComputedStyle. Here I found what I wanted:

var element = document.getElementById("elemId");
var style = document.defaultView.getComputedStyle(element, pseudoElt).getPropertyValue(property);

This was too unwieldy to be used three different times (column-gap and variants), so I made slight rewrite and put it in my dom namespace:

var dom = {
  …

  getCSSValue: function(element, property) {
    var cs = document.defaultView.getComputedStyle(element, null);
    return cs.getPropertyValue(property);
  }
}

Now I can simply call dom.getCSSValue(paged, '-webkit-column-gap'); and move on.