Also interesting in this case (Sorry if somebody also wrote a similar answer. Didn't see it. Works in my Jquery also):
If I want to retrieve the width property value of a progress bar
Here is my HTML
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> 40%</div>
</div>
My CSS
.progress-bar {
width: 40%;
}
My Javascript
var item = document.querySelector('.progress-bar');
item.textContent = getDefaultStyle(item, '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;
}
Get the integer value
var width = parseInt(item.textContent.replace("%",''));
echo width
//Outputs 40