html 实例源码

Xebcnor

工程师 (已认证)

原创分享签约作者

发表于实例源码

133

实例源码：

源代码：

执行

执行中...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时代Java与您共同学习(NowJava.com)</title>
<script src="https://cdn.staticfile.org/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>
</head>
<body>

<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>
/**代码未完, 请加载全部代码(NowJava.com).**/

编辑/阅读全部代码

执行结果：

本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。

编辑于 2019-10-16 16:38:152019-10-16 16:38:15

实例源码

实例源码订阅