How to get the width and height of an element in js

HTML code:

<section class="sec"  style="width: 400px;">
<style type="text/css">
	.sec {
		background-color: red;
		overflow: hidden;
		/*width: 500px;*/
	}
	.child {
		background-color: yellow;
		height: 100px;
		margin-top: 20px;
	}
</style>
	<article class="child"></article>	
</section>

js code:

var dom = document.getElementsByClassName('sec')[0];
	var w1 = dom.style.width; //This api can only get the attribute value of inline style
	var w2 = dom.currentStyle.width; //Although this api supports all three ways of setting styles, it only supports IE
	var w3 = window.getComputedStyle(dom).width; //This api supports all three styles of IE, Chrome and Firefox
	var w4 = dom.getBoundingClientRect().width; //It can also get the real-time size, support IE, Chrome, Firefox, but get the value without unit
	dom.onclick = function () {
		 alert(w4)
	}