[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
Ogólnie wolałbym wierzyć jQuery niż wykonując obliczenia na własną rękę. Problem polega na tym, że funkcja width() nie określa dokładnie, co robi w przypadku "box-sizing: border-box". Właśnie przetestowałem to i zwraca wewnętrzną szerokość z wyłączeniem wypełnienia itd. To może ale nie musi być poprawne; różni ludzie mogą spodziewać się różnych rzeczy. Tak więc powyższy przykład kodu działa, ale może nie być najbardziej niezawodny. Jak wskazano w kilku innych odpowiedziach, poleciłbym zamiast tego użyć funkcji outerWidth(). Przynajmniej obiecuje to, co ma w dokumentacji. –
Funkcja outerWidth/outerHeight nie istniała, gdy napisałem tę odpowiedź. –
+1 outerWidth było tym, czego szukałem. – bendewey