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
}
}