getDefaultStyle

Get the default CSS style of an element. Pure js equivalent of http://jsfiddle.net/sxqnt/

by Ron Valstar

HTML

<div class="parent">
    <div class="child">20%</div>
</div>

CSS

.child {
    height: 100px;
    margin: 0 auto;
    width: 30%;
    background: #ddd;
}
.parent .child {
    width: 40%;
}

JavaScript

var child = document.querySelector('.child');
child.textContent = getDefaultStyle(child, 'width');

function getDefaultStyle(element, prop) {
    var parent = element.parentNode,
        computedStyle = getComputedStyle(element),
        value;
    parent.style.display = 'none';
    value = computedStyle.getPropertyValue(prop);
    parent.style.removeProperty('display');
    return value;
}