Apa perbedaan antara width, innerWidth dan outerWidth, height, innerHeight dan outerHeight di jQuery

125

Saya menulis beberapa contoh untuk melihat perbedaannya, tetapi mereka menampilkan hasil yang sama untuk lebar dan tinggi.

<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>

Dalam contoh ini Anda dapat melihat bahwa mereka mengeluarkan hasil yang sama. Jika ada yang tahu apa bedanya tolong tunjukkan jawaban yang sesuai.

Terima kasih.

javascript jquery css dom styles zajke
sumber
8
Apakah Anda melihat dokumentasi jQuery?
Brad M
1
Coba tambahkan padding, perbatasan dan margin ke Anda <div>, dan lihat apakah itu memberikan hasil yang berbeda;)
Niet the Dark Absol
4
api.jquery.com/category/dimensions Halaman itu menjelaskan semuanya, dan jika Anda mengklik masing-masing akan memberikan lebih banyak informasi.
JClaspill
Saya telah mencari di google, tetapi tidak ada jawaban yang memenuhi harapan saya.
zajke
@BradM - Tidak ada orang. Tetapi hasil untuk "perbedaan antara width, innerWidth, outerWidth jquery" tidak ada yang memberi tahu saya secara esensial.
zajke

Jawaban:

16

Seperti yang disebutkan dalam komentar, dokumentasi memberi tahu Anda apa perbedaannya. Namun secara ringkas:

  • innerWidth / innerHeight - termasuk padding tapi bukan border
  • outerWidth / outerHeight - termasuk padding, border, dan margin opsional
  • tinggi / lebar - tinggi elemen (tanpa padding, tanpa margin, tanpa batas)
Default
sumber
4

  • width = mendapatkan lebarnya,

  • innerWidth = dapatkan lebar + padding,

  • outerWidth = dapatkan lebar + bantalan + batas dan secara opsional margin

Jika Anda ingin menguji tambahkan beberapa padding, margin, border ke kelas .test Anda dan coba lagi.

Baca juga di dokumen jQuery ... Semua yang Anda butuhkan cukup banyak di sana

Chris G-Jones
sumber
3

Tampaknya perlu untuk memberi tahu tentang penetapan nilai dan membandingkan tentang arti parameter "lebar" di jq: (asumsikan bahwa nilai_baru ditentukan dalam unit px)

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

Ketiga instruksi tersebut tidak memberikan efek yang sama: karena instruksi jquery pertama mendefinisikan lebar bagian dalam elemen dan bukan "lebar". Ini rumit.

Untuk mendapatkan efek yang sama Anda harus menghitung paddings sebelumnya (asumsikan var adalah pad), instruksi yang tepat untuk jquery untuk mendapatkan hasil yang sama dengan js murni (atau parameter css 'width') adalah:

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

Kami juga dapat mencatat bahwa untuk:

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

w1 adalah lebar bagian dalam, sedangkan w2 adalah lebar (arti atribut css) Selisih yang tidak didokumentasikan ke dalam dokumentasi JQ API.

salam Hormat

Trebly

Catatan: menurut pendapat saya ini dapat dianggap sebagai bug JQ 1.12.4. Cara keluarnya adalah dengan memperkenalkan secara definitif daftar parameter yang diterima untuk .css ('parameter', value) karena ada berbagai arti di balik 'parameter' diterima, yang memiliki kepentingan tetapi harus selalu jelas. Untuk kasus ini: 'lebar dalam' tidak akan berarti sama dengan 'lebar'. Kita dapat menemukan jejak masalah ini ke dalam dokumentasi .width (nilai) dengan kalimat: "Perhatikan bahwa di browser modern, properti lebar CSS tidak menyertakan padding"

pengguna161546
sumber
Sentuhan tambahan: .css('width')sama dengan .outerWidth()(yaitu, itu termasuk perbatasan serta bantalan) saat box-sizing: border-box;.
Bob Stein
0

Setuju dengan semua jawaban yang diberikan di atas. Hanya untuk menambahkan dalam hal jendela atau prospek browser innerWidth/ innerheighthanya mencakup area konten jendela, tidak ada yang lain, tetapi

outerWidth/ outerHeight termasuk area konten windows dan selain itu juga mencakup hal-hal seperti bilah alat, bilah gulir, dll ... dan nilai-nilai ini akan selalu sama atau lebih besar dari nilai innerWidth / innerHeight.

Semoga membantu lebih ...

Alok Ranjan
sumber
0

Apa yang saya lihat sekarang adalah itu innerWidthmencakup seluruh konten

Ini, jika jendela 900pxdan isinya 1200px(dan ada gulungan)

  • innerWidth berikan padaku 1200px
  • outerWidth berikan padaku 900px

Benar-benar tak terduga di mataku

* Dalam kasus saya, konten tersebut terkandung dalam file <iframe>

GWorking
sumber