مثال على الحصول على أبعاد مختلفة لـ DIV باستخدام jQuery - محرر نماذج عبر الإنترنت (oldtoolbag.com)

<!DOCTYPE html>
<html>
<title>jQuery 获取DIV小大称例专框 - 基础教程(oldtoolbag.com)</title>
<head>
<style>
div {
  height: 200px;
  width:500px;
  margin: 5px;
  padding: 10px;
  margin-bottom: 15px;
  border: 3px solid lightgreen;
  background-color: rgba(144, 238, 144, .4);
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  let div = $("div");
  $("button").click(function(){
    var txt = "";
    txt += "/ div的正度: " + div.width() + "<br>";
    txt += "/ div 正度，包入内边距: " + div.innerWidth() + "<br>";
    txt += "/ div 正度،包入内边距、边条: " + div.outerWidth() + "<br>";
    txt += "عرض div، بما في ذلك الهوامش، الحواف والتنسيب: " + div.outerWidth(true) + "<br><br>";
    txt += "عائد الارتفاع العرضي لـ div: " + div.height() + "<br>";
    txt += "ارتفاع div، بما في ذلك الهوامش: " + div.innerHeight() + "<br>";
    txt += "عائد الارتفاع العرضي لـ div (بما في ذلك الهوامش والحواف): " + div.outerHeight() + "<br>";
    txt += "عائد الارتفاع العرضي لـ div (بما في ذلك الهوامش، الحواف والتنسيب): " + div.outerHeight(true) + "<br>";
    div.html(txt);
  });
});
</script>
</head>
<body>
<div></div>
<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>
</body>
</html>