jQuery 3.3

.innerWidth()




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

.innerWidth () إرجاع: Number

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

  • الإصدار المضاف: 1.2.6 .innerWidth()

    • هذه الطريقة لا تقبل أي حجج.

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

لا تسري هذه الطريقة على كائنات window document ؛ لهذه ، استخدم .width() بدلاً من ذلك.

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

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

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

مثال:

الحصول على الداخلي للفقرة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>innerWidth 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( "innerWidth:" + p.innerWidth() );
</script>
 
</body>
</html>

عرض:

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

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

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

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

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

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

إذا لم يتم تحديد وحدة صريحة (مثل "em" أو "٪") ، فستفترض "px".

مثال:

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>innerWidth 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 ).innerWidth( modWidth ).addClass( "mod" );
modWidth -= 8;
});
</script>
 
</body>
</html>

عرض: