jQuery 3.3

.outerWidth()




jquery
احصل على العرض الخارجي الحالي المحسوب (بما في ذلك المساحة ، والحدود ، والهامش الاختياري) للعنصر الأول في مجموعة العناصر المطابقة أو قم بتعيين العرض الخارجي لكل عنصر متطابق.

.outerWidth ([includeMargin]) إرجاع: Number

الوصف: احصل على العرض الخارجي الحالي المحسوب (بما في ذلك المساحة ، والحدود ، والهامش الاختياري) للعنصر الأول في مجموعة العناصر المتطابقة.

لعرض عرض العنصر ، بما في ذلك المساحة اليسرى واليمنى والحافة والهامش الاختياري بالبكسل. إذا تمت دعوتك على مجموعة فارغة من العناصر ، undefined تُرجع undefined ( null قبل jQuery 3.0).

لا تسري هذه الطريقة على كائنات window document ؛ لهذه ، استخدم .width() بدلاً من ذلك. على الرغم من أنه يمكن استخدام .outerWidth() في عناصر الجدول ، إلا أنه قد يعطي نتائج غير متوقعة على الجداول باستخدام border-collapse: collapse .outerWidth() border-collapse: collapse خاصية CSS.

الشكل 1 - رسم توضيحي للعرض المقاس

ملاحظات إضافية:

  • قد يكون الرقم الذي يتم إرجاعه بواسطة واجهات برمجة التطبيقات ذات الصلة بالأبعاد ، بما في ذلك .outerWidth() ، .outerWidth() في بعض الحالات. يجب ألا نفترض أن الكود عبارة عن عدد صحيح. أيضًا ، قد تكون الأبعاد غير صحيحة عندما يتم تكبير الصفحة بواسطة المستخدم ؛ لا تعرض المستعرضات واجهة برمجة التطبيقات لاكتشاف هذا الشرط.
  • لا يتم ضمان القيمة التي تم .outerWidth() عنها بواسطة .outerWidth() لتكون دقيقة عند إخفاء العنصر أو .outerWidth() . للحصول على قيمة دقيقة ، تأكد من أن العنصر مرئي قبل استخدام .outerWidth() . سيحاول jQuery عرض عنصر ما مؤقتًا ثم إعادة إخفاؤه بقياس أبعاده ، ولكن هذا غير موثوق به (وحتى عندما يكون دقيقاً) يمكن أن يؤثر بشكل كبير على أداء الصفحة. قد تتم إزالة ميزة قياس العرض والعيش هذا في إصدار مستقبلي من jQuery.

مثال:

احصل على outer الخارجي من فقرة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>outerWidth demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p><p></p>
 
<script>
var p = $( "p:first" );
$( "p:last" ).text(
  "outerWidth:" + p.outerWidth() +
  " , outerWidth( true ):" + p.outerWidth( true ) );
</script>
 
</body>
</html>

عرض:

.outerWidth (القيمة) الإرجاع: jQuery

الوصف: قم بتعيين العرض الخارجي لـ CSS لكل عنصر في مجموعة العناصر المتطابقة.

  • الإصدار المضاف: 1.8.0 .outerWidth (قيمة)

    • القيمة
      النوع: String أو Number
      رقم يمثل عدد البكسل ، أو رقم مع وحدة قياس اختيارية ملحقة (كسلسلة).
  • الإصدار المضاف: 1.8.0 .outerWidth (وظيفة)

    • وظيفة
      النوع: Function (فهرس Integer ، عرض Number ) => String أو Number
      دالة تقوم بارجاع العرض الخارجي للضبط. يستقبل موضع فهرس العنصر في المجموعة والعرض الخارجي القديم كوسائط. داخل الدالة ، يشير this إلى العنصر الحالي في المجموعة.

عند استدعاء .outerWidth(value) ، يمكن أن تكون القيمة سلسلة (رقم ووحدة) أو رقم. إذا تم توفير رقم فقط للقيمة ، يفترض jQuery وحدة بكسل. إذا تم توفير سلسلة ، ومع ذلك ، يمكن استخدام أي قياس CSS صالح (مثل 100px أو 50% أو auto ).

مثال:

تغيير العرض الخارجي لكل div في أول مرة يتم النقر فوقه (وتغيير لونه).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>outerWidth demo</title>
  <style>
  div {
    width: 60px;
    padding: 10px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
 
<script>
var modWidth = 60;
$( "div" ).one( "click", function() {
  $( this ).outerWidth( modWidth ).addClass( "mod" );
  modWidth -= 8;
});
</script>
 
</body>
</html>

عرض: