小库编程教程示范演示-小库网

小库网
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		var txt="";
		txt+="div的宽度: " + $("#div1").width() + "</br>";
		txt+="div的内部宽度: " + $("#div1").innerWidth() + "</br>";
		txt+="div的外部宽度: " + $("#div1").outerWidth() + "</br>";
		txt+="div的外部宽度(包括外填充): " + $("#div1").outerWidth(true) + "</br>" + "</br>";
		txt+="div的高度: " + $("#div1").height() + "</br>";   
		txt+="div的内部高度: " + $("#div1").innerHeight() + "</br>";
		txt+="div的外部高度: " + $("#div1").outerHeight() + "</br>";
		txt+="div的外部高度(包括外填充): " + $("#div1").outerHeight(true) + "</br>";
		$("#div1").html(txt);
	});
});
</script>

<div id="div1" style="height:180px;width:300px;padding:10px;margin:4px;border:2px solid blue;background-color:lightblue;"></div>
<br>
<button>显示div的维度。</button>
<p>width() - 返回元素的宽度。</p>
<p>innerWidth() -返回元素的宽度 (包括内部填充)。</p>
<p>outerWidth() - 返回元素的宽度 (包括内部填充和外填充)。</p>
<p>outerWidth(true) - 返回元素的宽度 (包括内部填充、外填充和边框)。</p>
<hr>
<p>height() - 返回元素的高度。</p>
<p>innerHeight() - 返回元素的高度 (包括内部填充)。</p>
<p>outerHeight() - 返回元素的高度 (包括内部填充和边框)。</p>
<p>outerHeight(true) - 返回元素的高度 (包括内部填充、边框和外填充)。</p>