JQuery'de width, innerWidth ve externalWidth, height, interiorHeight ve externalHeight arasındaki fark nedir


125

Farkın ne olduğunu görmek için bir örnek yazdım, ancak genişlik ve yükseklik için bana aynı sonuçları gösteriyorlar.

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

Bu örnekte, aynı sonuçları çıkardıklarını görebilirsiniz. Farkın ne olduğunu bilen varsa lütfen bana uygun cevabı göster.

Teşekkürler.


8
JQuery belgelerine baktınız mı?
Brad M

1
Kendinize dolgu, kenarlık ve kenar boşluğu eklemeyi deneyin <div>ve bunun farklı sonuçlar verip vermediğine bakın;)
Niet the Dark Absol

4
api.jquery.com/category/dimensions Bu sayfa hepsini açıklar ve her birine tıklarsanız daha fazla bilgi verir.
JClaspill

Google'da aradım ama cevapların hiçbiri beklentilerimi karşılamıyor.
zajke

@BradM - Erkek yok. Ancak "genişlik, içGenişlik, dışGenişlik jquery arasındaki fark" sonuçları bana temelde hiçbir şey söylemiyor.
zajke

Yanıtlar:



16

Bir yorumda belirtildiği gibi , belgeler size farklılıkların tam olarak ne olduğunu söyler. Ama özetle:

  • innerWidth / innerHeight - dolgu içerir ancak kenarlık içermez
  • OuterWidth / externalHeight - dolgu, kenarlık ve isteğe bağlı olarak kenar boşluğunu içerir
  • yükseklik / genişlik - öğe yüksekliği (dolgu yok, kenar boşluğu yok, kenarlık yok)

4
  • genişlik = genişliği al

  • innerWidth = genişlik + dolgu al,

  • OuterWidth = genişlik + dolgu + kenarlık ve isteğe bağlı olarak kenar boşluğunu al

Test etmek istiyorsanız, .test sınıflarınıza bazı dolgu, kenar boşlukları, kenarlıklar ekleyin ve tekrar deneyin.

Ayrıca jQuery belgelerinde okuyun ... İhtiyacınız olan her şey hemen hemen orada


3

Değer atamalarını anlatmak ve jq'deki "width" parametresinin anlamını karşılaştırmak gerekli görünüyor: (new_value'nun px biriminde tanımlandığını varsayın)

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

Üç talimatlar aynı etkiyi vermez: İlk jquery talimatı tanımlar çünkü innerWidth elemanı olup "width" nin. Bu aldatıcıdır.

Aynı etkiyi elde etmek için daha önce doldurmaları hesaplamalısınız (var varsayalım), jquery'nin saf js (veya css parametresi 'width') ile aynı sonucu elde etmesi için doğru talimat:

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

Ayrıca şunları da not edebiliriz:

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

w1 iç genişliktir, w2 ise genişliktir (css özniteliği anlamı) JQ API belgelerinde belgelenmeyen fark.

Saygılarımla

üç misli


Not: Bence bu bir hata olarak değerlendirilebilir JQ 1.12.4 çıkış yolu .css ('parametre', değer) için kabul edilen parametrelerin bir listesini kesin olarak tanıtmak olmalıdır çünkü 'parametrelerin' arkasında çeşitli anlamlar vardır. ilgi duyan ancak her zaman açık olması gereken kabul edilir. Bu durum için: 'iç genişlik', 'genişlik' ile aynı anlama gelmeyecektir. Bu sorunun izini .width (değer) belgelerinde şu cümleyle bulabiliriz: "Modern tarayıcılarda CSS genişlik özelliğinin dolgu içermediğini unutmayın"


Bükülme eklendi: when ile .css('width')aynıdır .outerWidth()(yani, dolgunun yanı sıra kenarlığı da içerir) box-sizing: border-box;.
Bob Stein

0

Yukarıda verilen tüm cevaplara katılıyorum. Sadece pencere veya tarayıcı olasılıkları açısından eklemek gerekirse innerWidth/ innerheight, yalnızca pencere içerik alanı içerir, başka hiçbir şey

outerWidth/ outerHeight Windows içerik alanını içerir ve buna ek olarak araç çubukları, kaydırma çubukları vb. gibi şeyleri de içerir ve bu değerler her zaman innerWidth / innerHeight değerlerine eşit veya daha büyük olacaktır.

Umarım daha fazla yardımcı olur ...


0

Şu anda gördüğüm şey innerWidth, tüm içeriği içeren

Bu, eğer pencere 900pxve içerik ise 1200px(ve bir kaydırma varsa)

  • innerWidth bana verir 1200px
  • outerWidth bana verir 900px

Gözlerimde tamamen beklenmedik

* Benim durumumda içerik bir <iframe>

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.