jQuery에서 요소의 전체 너비 (패딩 및 테두리 포함)

jQuery에서 요소의 전체 너비 (패딩 및 테두리 포함)

---

주제에서와 같이 jQuery를 사용하여 테두리와 패딩을 포함한 요소의 총 너비를 어떻게 얻을 수 있습니까? jQuery 치수 플러그인이 있으며 760px, 10px 패딩 DIV에서 .width ()를 실행하면 760이 반환됩니다.

아마도 내가 잘못하고 있지만 내 요소가 780 픽셀 너비로 나타나고 Firebug에서 10px 패딩이 있다고 알려주지 만 .width ()를 호출하면 760 만 발생하므로 어떻게보아야할지 모르겠습니다.

제안 해 주셔서 감사합니다.

---

[최신 정보]

원래 답변은 jQuery 1.3 이전에 작성되었으며 전체 너비를 계산하기에 적절하지 않은 시점에 존재했던 기능입니다.

이제 JP가 올바르게 말하면 jQuery에는 outerWidth 및 outerHeight 함수가 있으며 기본적으로 borderand 를 포함 하고 함수의 첫 번째 인수가paddingmargintrue

---

[원래 답변]

width방법은 더 이상 필요하지 않습니다 dimensions그것이 추가 되었기 때문에, 플러그인을jQuery Core

당신이해야 할 일은 특정 div의 패딩, 여백 및 테두리 너비 값을 가져 와서 width메소드 의 결과에 추가하는 것입니다

이 같은:

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

가독성을 높이기 위해 여러 줄로 분할

이렇게하면 CSS에서 패딩 또는 여백 값을 변경하더라도 항상 정확한 계산 값을 얻을 수 있습니다

---

이 답변에 걸림돌이되는 사람은 jQuery now (> = 1.3)에 패딩 / 테두리를 포함하여 너비를 검색하는 outerHeight/ outerWidth함수 가 있음을 알아야합니다.

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

여백도 포함 시키려면 간단히 다음을 전달하십시오 true.

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

---

최신 버전의 jquery에서 outerWidth가 깨진 것처럼 보입니다.

불일치는

외부 div가 플로팅되고 내부 div에 너비가 설정되어 있습니다 (외부 div보다 작음) 내부 div에 style = "margin : auto"

---

간단하게하기 위해 나는 일부 기능에서 Andreas Grech의 위대한 대답을 캡슐화했습니다. 잘라 붙이기 행복을 원하는 사람들을 위해.

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

---

동일한 브라우저는 테두리 너비에 대해 문자열을 반환 할 수 있습니다.이 parseInt는 NaN을 반환하므로 값을 int로 올바르게 구문 분석해야합니다.

        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"));

---

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

참고URL : https://stackoverflow.com/questions/349705/total-width-of-element-including-padding-and-border-in-jquery