각 상황에서 원소의 넓이 획득

서술이 간단하기 위해서, 여기는width 예시만 가지고 있습니다.
상황 1, 원소 스타일 속성 설정width/height

<div style="width:100px;">test<div>
<script>
	var div = document.getElementsByTagName('div')[0];
	alert(div.style.width);
</script>

 
위와 같이el을 사용합니다.style.width만 있으면 돼요.스타일 속성에width를 설정하지 않으면el을 사용합니다.style.width는 얻을 수 없습니다. 아래와 같습니다.

<div>test<div>
<script>
	var div = document.getElementsByTagName('div')[0];
	alert(div.style.width);
</script>

　　
모든 브라우저에서 팝업된 문자열은 빈 문자열입니다.페이지의 css에 스타일을 박아도 얻을 수 없습니다. 아래와 같습니다.

<style>
	div {width: 100px}
</style>
<div>test<div>
<script>
	var div = document.getElementsByTagName('div')[0];
	alert(div.style.width);
</script>

이 때 getComputedStyle이나currentStyle이 도움이 될 것입니다.
 
상황2, 요소는 스타일시트 설정을 통해 width/height
 
스타일시트를 도입하는 두 가지 방법이 있는데 하나는 링크 라벨을 사용하여 단독 css 파일을 도입하는 것이고, 다른 하나는 html 페이지에서 스타일 라벨을 직접 사용하는 것이다.여기서는 두 번째 방식으로 테스트를 한다.아래와 같다

<style>
	div {width: 100px}
</style>
<div>test<div>
<script>
	function getStyle(el, name) {
		if(window.getComputedStyle) {
			return window.getComputedStyle(el, null);
		}else{
			return el.currentStyle;
		}
	}
	var div = document.getElementsByTagName('div')[0];
	alert(getStyle(div, 'width'));
</script>

　　
모든 브라우저에서 100px가 팝업됩니다.설명은 getComputedStyle과currentStyle을 통해 요소가 스타일시트에 정의된 너비를 얻을 수 있습니다.
만약 요소가 스타일 속성에 넓이를 설정하지 않았거나 스타일시트에 넓이를 설정하지 않았다면 getComputedStyle이나currentStyle로 가져올 수 있습니까?정답은 getComputedStyle 가능,currentStyle 불가입니다.아래와 같다

<div>test<div>
<script>
	function getStyle(el, name) {
		if(window.getComputedStyle) {
			return window.getComputedStyle(el, null);
		}else{
			return el.currentStyle;
		}
	}
	var div = document.getElementsByTagName('div')[0];
	alert(getStyle(div, 'width'));
</script>

　　
div는 스타일 속성을 설정하지 않았고 스타일시트를 도입하지 않았습니다.Firefox/IE9/SAfari/Chrome/Opera에서는 너비(브라우저 기본값)를 얻을 수 있지만 IE6/7/8에서는 안 됩니다오토 반환.
여기서 getStyle 방법은 getComputedStyle을 우선적으로 사용하고 IE9은 이미 이 방법을 지원합니다.따라서 IE9에서 폭을 얻을 수 있습니다.IE6/7/8은 지원되지 않으며 currentStyle을 사용해서만 가져올 수 있습니다.
 
상황 3. 요소는 스타일 속성을 설정하지 않았고 스타일시트를 도입하지 않았다.

<div>test<div>
<script>
	function getStyle(el,name) {
		if(window.getComputedStyle) {
			return window.getComputedStyle(el, null)[name];
		}else{
			return el.currentStyle[name];
		}
	}
	function getWH(el, name) {
		var val = name === "width" ? el.offsetWidth : el.offsetHeight,
			which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom'];
		
		// display is none
		if(val === 0) {
			return 0;
		}

		for(var i = 0, a; a = which[i++];) {
			val -= parseFloat( getStyle(el, "border" + a + "Width") ) || 0;
			val -= parseFloat( getStyle(el, "padding" + a) ) || 0;
		}
	
		return val + 'px';
	}
	var div = document.getElementsByTagName('div')[0];
	alert(getWH(div, 'width'));
</script>

 
사고방식은 매우 간단하다. 원소의offsetWidth/offsetHeight를 가져오고 원소의padding과border를 뺀다.
 
관련:
http://www.cnblogs.com/snandy/archive/2011/09/05/2167056.html