get-applied-style.js v1.0.0

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

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

Usage

Exactly the same as getComputedStyle

getSpecifiedStyle(element[, pseudoElt]);

Example

div {
	width: auto !important;
}

<div style="width: 100px;">hoge</div>
<script src="/path/to/get-specified-style.js">
<script>
var div = document.querySelector('div');
var style = getSpecifiedStyle(div);
console.log(style);
</script>

{
	"width": {
		"value": "400px",
		"priority": "important",
		"specificity": 1001
	}
}