it-swarm.dev

ما هو الفرق بين العرض والداخلية والعرض والطول والعرض والارتفاع والارتفاع الخارجي في مسج

كتبت بعض الأمثلة لأرى ما هو الفرق ، لكنهم يعرضون لي نفس النتائج للعرض والارتفاع.

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

في هذا المثال ، يمكنك أن ترى أنها تنتج نفس النتائج. إذا كان أي شخص يعرف ما هو الفرق ، أرجو أن تريني الإجابة المناسبة.

شكر.

107
zajke
242
zod

كما ذكر في تعليق ، الوثائق يخبرك بالضبط ما هي الاختلافات. ولكن باختصار:

  • innerWidth/innerHeight - يتضمن الحشو ولكن ليس الحدود
  • outerWidth/OuterHeight - يتضمن الحشو ، والحدود ، والهامش اختياريًا
  • الارتفاع/العرض - ارتفاع العنصر (بدون غطاء ، لا هامش ، لا حدود)
13
Default
  • العرض = الحصول على العرض ،

  • عرض داخلي = الحصول على عرض + الحشو ،

  • outerWidth = الحصول على العرض + الحشو + الحدود واختياريا الهامش

إذا كنت ترغب في اختبار إضافة بعض الحشو ، والهوامش ، والحدود إلى الفصول الدراسية .test والمحاولة مرة أخرى.

اقرأ أيضًا في مستندات jQuery ... كل ما تحتاجه موجود إلى حد كبير

4
Chris G-Jones

يبدو من الضروري معرفة تعيينات القيم ومقارنة معنى المعلمة "width" في jq: (افترض أن new_value معرَّفة في وحدة px)

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;

الإرشادات الثلاثة لا تعطي نفس التأثير: لأن تعليمة مسج الأولى تحدد العرض الداخلي للعنصر وليس "العرض". هذا صعب.

للحصول على نفس التأثير ، يجب عليك حساب الحشوات قبل (نفترض أن var هي pads) ، والتعليم الصحيح ل jquery للحصول على نفس النتيجة مثل js الخالص (أو عرض css لمعلمة) هو:

jqElement.css('width',new_value+pads);

يمكننا أيضًا ملاحظة أنه من أجل:

var w1 = jqElement.css('width');
var w2 = jqelement.width();

w1 هو العرض الداخلي ، بينما w2 هو العرض (معنى سمة css) الفرق الذي لم يتم توثيقه في وثائق JQ API.

تحياتي الحارة

Trebly


ملاحظة: في رأيي ، يمكن اعتبار ذلك بمثابة خطأ JQ 1.12.4. يجب أن تكون طريقة الخروج هي تقديم قائمة من المعلمات المقبولة بشكل نهائي لـ .css ("المعلمة" ، القيمة) نظرًا لوجود العديد من المعاني وراء "المعلمات" مقبولة ، والتي لها مصلحة ولكن يجب أن تكون واضحة دائما. في هذه الحالة: "داخلي" لن يعني نفس "العرض". يمكننا العثور على مسار لهذه المشكلة في توثيق .width (value) مع الجملة: "لاحظ أنه في المتصفحات الحديثة ، لا تتضمن خاصية عرض CSS الحشو"

1
user161546