I need to know the width of the block without padding without jQuery, but it should be indicated only in pixels and be a number.

document.body.onload = function() { alert(document.getElementsByClassName('progressbar').width); } 
 .progressbar { width:20%; height:100px; padding:10px; background:black; } .progressbar .progress { width:100%; height:100%; background:red; } 
 <div class="progressbar"> <div class="progress"></div> </div>

1 answer 1

The .getComputedStyle() function will return the final property values ​​applied to the element. In this case, all sizes are width: 212px to pixels, for example, width: 212px or font-size: 16px . To convert to a number, use .parseInt()

 var computedStyle = getComputedStyle(document.getElementById('test'), null) var width = parseInt(computedStyle.getPropertyValue('width')); console.log(width); 
 div { height: 50px; padding: 50px; width: 100%; } 
 <div id="test"></div>