jQuery의 요소 총 너비(패딩 및 테두리 포함)

jQuery의 요소 총 너비(패딩 및 테두리 포함)

주제와 같이 jQuery를 사용하여 요소의 테두리와 패딩을 포함한 요소의 전체 폭을 어떻게 얻을 수 있습니까?jQuery dimensions 플러그인이 있고 실행중입니다..width()내게760px-wide,10px paddingDIV 반환760.

내가 뭔가 잘못하고 있는 것 같지만, 만약 내 요소가 다음과 같이 나타난다면,780 pixels wide그리고 파이어버그가 말해주더군요10px padding그 위에서,.width()760밖에 안 줘요, 어떻게 해야 할지 모르겠어요.

어떤 제안이든 감사합니다.

[업데이트]

원래의 답은 jQuery 1.3 이전에 작성되었고, 그 당시 존재했던 함수들은 스스로 전체 폭을 계산하기에 충분하지 않았습니다.

이제 J-P가 정확히 말한 것처럼, jQuery는 outerWidth와 outer의 기능을 갖습니다.높이는 다음을 포함합니다.border그리고.padding기본적으로, 또한margin만약 함수의 첫번째 인수가true

---

[원답]

그width메소드는 더 이상 필요하지 않습니다.dimensions플러그인에 추가되었기 때문에jQuery Core

당신이 해야 할 일은 그 특정 디바의 패딩, 마진, 테두리 폭 값을 구하고 그것들을 그 결과에 추가하는 것입니다.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)에 패딩/borders를 포함한 너비를 검색할 수 있는 기능이 있음을 알아야 합니다.

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

여백도 포함시키려면 다음 항목을 통과하기만 하면 됩니다.

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

uterWidth가 최신 버전의 jquery에서 깨진 것 같습니다.

그 불일치는 다음과 같은 경우에 발생합니다.

바깥쪽 디브는 띄우고, 안쪽 디브는 너비 설정(smaller은 바깥쪽 디브보다), 안쪽 디브는 스타일="margin:auto"

단순화를 위해 위의 안드레아스 그레흐의 훌륭한 답을 몇 가지 기능으로 캡슐화했습니다.조금 잘라 붙여넣기 행복을 원하는 사람들을 위해.

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

동일한 브라우저가 이 구문에서 테두리 너비에 대한 문자열을 반환할 수 있습니다.Int는 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