ديفكوم :مجتمع يضم آلاف الاشخاص الطامحين للتعلم

المقالات

الابعاد jQuery - Dimensions

-

بنتكلم في هذا الدرس عن طرق الابعاد jQuery - Dimensions، حيث يمكن من خلال jQuery وبكل سهولة التعامل مع أبعاد العناصر(dimensions of elements) ونافذة المتصفح(browser window).

يوفر JQuery مجموعة من الطريق للتعامل مع الابعاد هي:

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

الصورة التالية توضح ما هي الابعاد

نفهم هذه الطرق بأمثلة

طرق العرض (width) والارتفاع (height) jQuery width() and height() Methods

في طريقة العرض (width) يتم تعيين (set) أو إرجاع(returns) عرض العنصر(width element) (باستثناء padding، border و margin).
في طريقة الارتفاع (height) يتم تعيين (set) أو إرجاع(returns) ارتفاع العنصر (باستثناء padding، border و margin).

نطبق مثال حتى نفهم الموضوع:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  .divError
  {
    border:solid;
    border-width: 1px;
    border-color: rgb(247, 7, 7);
    color: red;;
    width: 200px;
    height: 50px;
  }
  .divfont
  {
    font-size:x-large ;
  }
</style>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
    var txt = "";
    txt += "Width of div: " + $("#divResult").width() + "</br>";
    txt += "Height of div: " + $("#divResult").height();
    $("#divResult").html(txt);
  });
});
</script>
</head>
<body>
 <button id="btn2">Get Div dimensions </button>
  <br>
  <br>
<div id="divResult" class="divError">
</div>
</body>
</html>

النتيجة:

نفهم الكود: طبقنا طريقة العرض على div المسمى divResult، ونفس الكلام للارتفاع. ثم النتيجة خزناها في متغير باسم txt، وبعد هيك عرضنا قيمة المتغير (وهي الطول والعرض ل div) داخل نفس div

طرق العرض (innerWidth) والارتفاع (innerHeight) jQuery innerWidth() and innerHeight() Methods

طريقة العرض (innerWidth) : تستخدم لإرجاع عرض العنصر (بما في ذلك padding).
طريقة الارتفاع (innerHeight) : تستخدم لإرجاع ارتفاع العنصر (بما في ذلك padding).

نطبق مثال حتى نفهم الموضوع:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  .divError
  {
    border:solid;
    border-width: 1px;
    border-color: rgb(11, 143, 44);
    color: rgb(11, 143, 44);
    padding: 15px;
    margin: 2px;
    width: 200px;
    height: 150px;
  }
  .divfont
  {
    font-size:x-large ;
  }
</style>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
   
    var txt = "";
    txt += "Width of div: " + $("#divResult").width() + "</br>";
    txt += "Height of div: " + $("#divResult").height() + "</br>";
    txt += "Inner Width of div: " + $("#divResult").innerWidth() + "</br>";
    txt += "Inner Height of div: " + $("#divResult").innerHeight();
    $("#divResult").html(txt);
  });
});
</script>
</head>
<body>
 <button id="btn2">Get Div dimensions </button>
  <br>
  <br>
<div id="divResult" class="divError">
</div>
</body>
</html>

النتيجة:

طرق العرض (outerWidth) والارتفاع (outerHeight) jQuery outerWidth() and outerHeight Methods

طريقة العرض (outerWidth): تستخدم لإرجاع عرض العنصر (يشمل padding and border).
طريقة الارتفاع (outerHeight): تستخدم لإرجاع ارتفاع العنصر (يشمل padding and border).

نطبق مثال حتى نفهم الموضوع:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  .divError
  {
    border:solid;
    border-width: 1px;
    border-color: rgb(11, 143, 44);
    color: rgb(11, 143, 44);
    padding: 15px;
    margin: 2px;
    width: 200px;
    height: 150px;
  }
  .divfont
  {
    font-size:x-large ;
  }
</style>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
    var txt = "";
    txt += "Width of div: " + $("#divResult").width() + "</br>";
    txt += "Height of div: " + $("#divResult").height() + "</br>";
    txt += "Inner Width of div: " + $("#divResult").innerWidth() + "</br>";
    txt += "Inner Height of div: " + $("#divResult").innerHeight()+ "</br>";
    txt += "Outer Width of div: " + $("#divResult").outerWidth() + "</br>";
    txt += "Outer Height of div: " + $("#divResult").outerHeight();
    $("#divResult").html(txt);
  });
});
</script>
</head>
<body>
 <button id="btn2">Get Div dimensions </button>
  <br>
  <br>
<div id="divResult" class="divError">
</div>
</body>
</html>

النتيجة:

طرق العرض (outerWidth) والارتفاع (outerHeight) مع true

عند استخدام true ك parameter مع هذه الطرق يتم حساب الطول والعرض مع padding, border, and margin

مثال:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  .divError
  {
    border:solid;
    border-width: 1px;
    border-color: rgb(11, 143, 44);
    color: rgb(11, 143, 44);
    padding: 15px;
    margin: 2px;
    width: 200px;
    height: 150px;
  }
  .divfont
  {
    font-size:x-large ;
  }
</style>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
   
    var txt = "";
    txt += "Width of div: " + $("#divResult").width() + "</br>";
    txt += "Height of div: " + $("#divResult").height() + "</br>";
    txt += "Inner Width of div: " + $("#divResult").innerWidth() + "</br>";
    txt += "Inner Height of div: " + $("#divResult").innerHeight();
    txt += "Outer Width of div: " + $("#divResult").outerWidth(true) + "</br>";
    txt += "Outer Height of div: " + $("#divResult").outerHeight(true);
    $("#divResult").html(txt);
  });
});
</script>
</head>
<body>
 <button id="btn2">Get Div dimensions </button>
  <br>
  <br>
<div id="divResult" class="divError">
</div>
</body>
</html>

النتيجة :

الطول والعرض ل document (the HTML document) و window (the browser viewport)

يمكن حساب الطول والعرض ل HTML document و browser viewport باستخدام كود بسيط

مثال:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  .divError
  {
    border:solid;
    border-width: 1px;
    border-color: rgb(11, 143, 44);
    color: rgb(11, 143, 44);
    padding: 15px;
    margin: 2px;
    width: 200px;
    height: 150px;
  }
  .divfont
  {
    font-size:x-large ;
  }
</style>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){ 
    var txt = "";
    txt += "Document Width: " + $(document).width() + "\n";
    txt += "Document Height: " + $(document).height()+"\n";
    txt += "Window Width: " + $(window).width() + "<br>";
    txt += "Window Height: " + $(window).height()+ "\n";
    $("#divResult").html(txt);  
  });
});
</script>
</head>
<body>
 <button id="btn2">Get document and window dimensions </button>
  <br>
  <br>
<div id="divResult" class="divError">
</div>
</body>
</html>

النتيجة :

حاول تصغر الشاشة او تكبرها وبعدها انقر مرة ثانية على button وشوف النتيجة

تغير عرض وارتفاع element

يمكن تغيير عرض وارتفاع element باستخدام الطرق width و height مع ارسال القيمة التغير المطلوبة.

مثال:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  .divError
  {
    border:solid;
    border-width: 1px;
    border-color: rgb(11, 143, 44);
    color: rgb(11, 143, 44);
    padding: 15px;
    margin: 2px;
    width: 200px;
    height: 150px;
  }
  .divfont
  {
    font-size:x-large ;
  }
</style>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){   
    $("#divResult").width(350).height(350);  
  });
});
</script>
</head>
<body>
 <button id="btn2">Resize div </button>
  <br>
  <br>
<div id="divResult" class="divError">
</div>
</body>
</html

النتيجة :

المقال السابق

طرق CSS - css()

المقال التالي

اترك تعليقك

الاسم الكامل

البريد الإلكتروني

اضافة تعليق

حفظ