Całkowita szerokość elementu (łącznie z obramowaniem i obramowaniem) w jQuery

Question

Jak w temacie uzyskać całkowitą szerokość elementu, w tym obramowanie i wypełnienie, za pomocą jQuery? Mam wtyczkę jQuery dimensions i działającą .width() na moim 760px, 10px padding DIV zwraca 760.

Być może robię coś złego, ale jeśli mój element przejawia się jako 780 pikseli szerokości i Firebug mówi mi, że jest na nim 10px, ale wywołanie .width() daje tylko 760, trudno byłoby mi zobaczyć, jak.

Dzięki za wszelkie sugestie.

Answer 1

[Aktualizacja]

Oryginalny odpowiedź została napisana przed jQuery 1.3 i funkcji, które istniały w czasie, gdy nie wystarczające same obliczenia całą szerokość.

Teraz, jak J-P słusznie stwierdza, jQuery ma funkcje outerWidth i outerHeight które obejmują border i padding domyślnie, a także margin jeśli pierwszy argument funkcji jest true

---

[Original odpowiedź]

Metoda width nie wymaga już wtyczki dimensions, b ecause został dodany do jQuery Core

Co trzeba zrobić, to dopełnienie, marginesów i granicznej szerokości wartości danego div i dodać je do wyniku metody width

coś takiego:

var theDiv = $("#theDiv"); 
var totalWidth = theDiv.width(); 
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width 
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width 
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width 

podzielone na wiele linii, aby uczynić go bardziej czytelnym

ten sposób zawsze będziesz uzyskać prawidłową wartość kalkulowana, nawet jeśli ch Ange padding lub marginesów wartości z css

Answer 2

Ktoś jeszcze natrafiają na tej odpowiedzi należy zwrócić uwagę, że teraz jQuery (> = 1.3) ma outerHeight/outerWidth funkcje pobierające szerokość łącznie dopełnienia/granice, na przykład

$(elem).outerWidth(); // Returns the width + padding + borders 

Aby uwzględnić margines, jak również, po prostu przejść true:

$(elem).outerWidth(true); // Returns the width + padding + borders + margins 

Answer 3

wygląda outerWidth jest uszkodzony w najnowszej wersji jQuery.

Rozbieżność się dzieje, gdy

zewnętrzna div jest płynął, wewnętrzna div ma zestaw szerokość (mniejsza niż zewnętrzna div) wewnętrzna div ma style = "margin: auto"

Answer 4

sam przeglądarki mogą zwracać ciąg dla szerokości obramowania, w tym parseInt zwróci NaN , więc upewnij się, że analizujesz wartość int poprawnie.

 var getInt = function (string) { 
      if (typeof string == "undefined" || string == "") 
       return 0; 
      var tempInt = parseInt(string); 

      if (!(tempInt <= 0 || tempInt > 0)) 
       return 0; 
      return tempInt; 
     } 

     var liWidth = $(this).width(); 
     liWidth += getInt($(this).css("padding-left")); 
     liWidth += getInt($(this).css("padding-right")); 
     liWidth += getInt($(this).css("border-left-width")); 
     liWidth += getInt($(this).css("border-right-width")); 

Answer 5

Dla uproszczenia zamknąłem znakomitą odpowiedź Andreasa Grecha powyżej w niektórych funkcjach. Dla tych, którzy chcą odrobiny szczęścia.

function getTotalWidthOfObject(object) { 

    if(object == null || object.length == 0) { 
     return 0; 
    } 

    var value  = object.width(); 
    value   += parseInt(object.css("padding-left"), 10) + parseInt(object.css("padding-right"), 10); //Total Padding Width 
    value   += parseInt(object.css("margin-left"), 10) + parseInt(object.css("margin-right"), 10); //Total Margin Width 
    value   += parseInt(object.css("borderLeftWidth"), 10) + parseInt(object.css("borderRightWidth"), 10); //Total Border Width 
    return value; 
} 

function getTotalHeightOfObject(object) { 

    if(object == null || object.length == 0) { 
     return 0; 
    } 

    var value  = object.height(); 
    value   += parseInt(object.css("padding-top"), 10) + parseInt(object.css("padding-bottom"), 10); //Total Padding Width 
    value   += parseInt(object.css("margin-top"), 10) + parseInt(object.css("margin-bottom"), 10); //Total Margin Width 
    value   += parseInt(object.css("borderTopWidth"), 10) + parseInt(object.css("borderBottomWidth"), 10); //Total Border Width 
    return value; 
} 

Answer 6

$(document).ready(function(){  
$("div.width").append($("div.width").width()+" px"); 
$("div.innerWidth").append($("div.innerWidth").innerWidth()+" px"); 
$("div.outerWidth").append($("div.outerWidth").outerWidth()+" px");   
}); 


<div class="width">Width of this div container without including padding is: </div> 
<div class="innerWidth">width of this div container including padding is: </div> 
<div class="outerWidth">width of this div container including padding and margin is:  </div>