get-specified-style.js

getSpecifiedStyle

getComputedStyle vs getSpecifiedStyle

Assume that viewport width is 1024px.

<div>hoge</div>

div {
	width: auto;
}

var element = document.querySelector('div');
var spedifiedStyle = getSpecifiedStyle(element);
var computedStyle = getComputedStyle(element);

console.log(spedifiedStyle.getPropertyValue('width'));//auto
console.log(computedStyle.getPropertyValue('width'));//1024px

Installation

bower install get-specified-style.js

or

yarn add get-specified-style.js

Load with script tag

<script src="/path/to/get-specified-style.js">

Usage

Almost the same as getComputedStyle

let style = getSpecifiedStyle(element[, pseudoElt]);

API

getPropertyValue

style.getPropertyValue(propertyName);//any value

getPropertyPriority

style.getPropertyPriority(propertyName);//'' or 'important'

getSpecificity

style.getSpecificity(propertyName);// 0~10000

Dependencies

• specificity - Calculate the specificity of a CSS selector