Get a css parameter without creating an element [duplicate]

Question

I dispose of the following class :

.specialCell {
  padding-left: 10px;
}

I would like to use this value as a property in JS, eg

var specialCellLeftPadding = getCssValue('.specialCell', 'padding-left');

The only way I can think of would be to create an element with the wanted class and get the seeked attribute value :

var tmpElt = document.createElement('div');
tmpElt.className = 'specialCell';
document.body.appendChild(tmpElt);
var specialCellLeftPadding = getComputedProperties(tmpElt).getPropertyValue('padding-left');
document.body.removeChild(tmpElt);

Is it possible to achieve the same purpose without creating and adding an new element to the dom ? (assuming no element with this class exists).

Answer 1

You can query CSS information directly from stylesheets using the CSSOM. E.g.,

var stylesheet = document.styleSheets[0];

document.getElementById('output').innerHTML = stylesheet.cssRules[0].style.paddingLeft;

.test { padding-left: 12px; }

Padding left: <span id="output"></span>