أحدث البرامج التعليمية وتطوير الشبكة
 

jQuery - الأبعاد

❮ السابق التالي الفصل ❯

مع مسج، فمن السهل أن تعمل مع أبعاد العناصر ونافذة المتصفح.

مسج طرق البعد

مسج لديها العديد من الأساليب الهامة للعمل مع أبعاد:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

مسج الأبعاد

مسج الأبعاد

مسج width() و height() طرق

و width() مجموعات طريقة أو إرجاع عرض عنصر (باستثناء padding, border و margin ).

على height() مجموعات طريقة أو إرجاع ارتفاع عنصر (باستثناء padding, border و margin ).

يقوم المثال التالي بإرجاع العرض والارتفاع من المحدد <div> العنصر:

مثال

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});
انها محاولة لنفسك »

مسج innerWidth() و innerHeight() طرق

و innerWidth() الأسلوب بإرجاع عرض عنصر (ويشمل padding ).

و innerHeight() الأسلوب بإرجاع ارتفاع عنصر (ويشمل padding ).

إرجاع المثال التالي الداخلي-عرض / ارتفاع من المحدد <div> العنصر:

مثال

$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});
انها محاولة لنفسك »

مسج outerWidth() و outerHeight() طرق

و outerWidth() الأسلوب بإرجاع عرض عنصر (ويشمل padding و border ).

و outerHeight() الأسلوب بإرجاع ارتفاع عنصر (ويشمل padding و border ).

إرجاع المثال التالي الخارجي، عرض / ارتفاع من المحدد <div> العنصر:

مثال

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});
انها محاولة لنفسك »

و outerWidth(true) الأسلوب بإرجاع عرض عنصر (ويشمل padding, border ، و margin ).

و outerHeight(true) الأسلوب بإرجاع ارتفاع عنصر (ويشمل padding, border ، و margin ).

مثال

$("button").click(function(){
    var txt = "";
    txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
    txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
});
انها محاولة لنفسك »

مسج المزيد من width() و height()

يقوم المثال التالي بإرجاع العرض والارتفاع من الوثيقة (وثيقة 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);
});
انها محاولة لنفسك »

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »

مسج CSS المرجعي

لمحة كاملة عن أساليب مسج المغلق، يرجى زيارة موقعنا مسج HTML / CSS المرجعي .


❮ السابق التالي الفصل ❯