jQuery - الأبعاد
باستخدام jQuery ، من السهل التعامل مع أبعاد العناصر ونافذة المتصفح.
طرق أبعاد jQuery
يحتوي jQuery على عدة طرق مهمة للعمل مع الأبعاد:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
أبعاد jQuery
طرق عرض jQuery () والارتفاع ()
تقوم width()الطريقة بتعيين أو إرجاع عرض العنصر (باستثناء المساحة المتروكة والحدود والهامش).
تقوم height()الطريقة بتعيين أو إرجاع ارتفاع العنصر (باستثناء المساحة المتروكة والحدود والهامش).
يعرض المثال التالي عرض وارتفاع <div>
عنصر محدد:
مثال
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
طرق jQuery innerWidth () و innerHeight ()
تقوم innerWidth()الطريقة بإرجاع عرض العنصر (بما في ذلك المساحة المتروكة).
تُرجع innerHeight()الطريقة ارتفاع العنصر (بما في ذلك المساحة المتروكة).
يُرجع المثال التالي العرض الداخلي / الارتفاع <div>
لعنصر محدد:
مثال
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
أساليب jQuery OuterWidth () و OuterHeight ()
تقوم outerWidth()الطريقة بإرجاع عرض العنصر (بما في ذلك المساحة المتروكة والحدود).
تُرجع outerHeight()الطريقة ارتفاع العنصر (بما في ذلك المساحة المتروكة والحدود).
يقوم المثال التالي بإرجاع العرض / الارتفاع الخارجي <div>
لعنصر محدد:
مثال
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
تُرجع outerWidth(true)الطريقة عرض العنصر (بما في ذلك المساحة المتروكة والحدود والهامش).
تُرجع outerHeight(true)الطريقة ارتفاع العنصر (بما في ذلك الحشو والحدود والهامش).
مثال
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery المزيد من العرض () والارتفاع ()
يعرض المثال التالي عرض وارتفاع المستند (مستند HTML) والنافذة (إطار عرض المستعرض):
مثال
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
يحدد المثال التالي عرض وارتفاع <div>
عنصر محدد:
مثال
$("button").click(function(){
$("#div1").width(500).height(500);
});
تمارين مسج
مرجع jQuery CSS
للحصول على نظرة عامة كاملة على جميع طرق jQuery CSS ، يرجى الانتقال إلى مرجع jQuery HTML / CSS الخاص بنا .