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


164

주제에서와 같이 jQuery를 사용하여 테두리와 패딩을 포함한 요소의 총 너비를 어떻게 얻을 수 있습니까? 내가 jQuery를 치수 플러그인, 실행있어 .width()내에서 760px-wide, 10px paddingDIV 돌아갑니다 760.

어쩌면 내가 잘못하고있는 것이지만 내 요소가 그대로 나타나고 780 pixels wideFirebug가 나와 있다고 알려주지 만 760 10px padding만 호출 .width()하면 방법을 알기가 어려울 것입니다.

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

답변:


216

[최신 정보]

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

이제 JP가 올바르게 설명 했듯이 jQuery에는 outerWidthouterHeight 함수가 있으며 기본적으로 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에서 패딩 또는 여백 값을 변경하더라도 항상 정확한 계산 값을 얻을 수 있습니다


3
일반적으로, 나는 스스로 계산하는 것보다 jQuery를 믿습니다. 문제는 width () 함수가 실제로 "box-sizing : border-box"의 경우 수행하는 작업을 지정하지 않는다는 것입니다. 방금 테스트 한 결과 패딩 등을 제외하고 내부 너비가 반환됩니다. 이는 정확하거나 올바르지 않을 수 있습니다. 다른 사람들은 다른 것을 기대할 수 있습니다. 따라서 위의 코드 샘플은 실제로 작동하지만 가장 신뢰할 수있는 방법은 아닙니다. 다른 답변에 표시된 것처럼 대신 outerWidth () 함수를 사용하는 것이 좋습니다. 적어도 문서에서 무엇을 약속해야합니다.
Jan Zich 2018 년

4
이 답변을 쓸 때 outerWidth / outerHeight 함수가 존재하지 않았습니다.
Andreas Grech

누군가가 여전히 사용하고 있다면 내 이전 코드에 대한 간단한 의견입니다. parseIntS는 변경 될 수 +코드가 더 간결하게 연산자. 그래서, parseInt(theDiv.css("padding-left"), 10)로 전환 할 수 +theDiv.css("padding-left")... 등
안드레아스 GRECH에게

182

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

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

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

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

3
내가 편집 기능이없는,하지만 난에 대한 첫 번째 주석 변경됩니다 : 폭 + 패딩 + 국경 // 반환을 그리고 // 너비 + 패딩 + 국경 + 마진 반환에 두 번째 주석을 변경
CtrlDot

2

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

불일치는

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


2

간단히하기 위해 나는 일부 기능에서 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;
}

0

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

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

답변을 게시 해 주셔서 감사합니다! 자체 프로모션에 대한 FAQ를 주의 깊게 읽으십시오 . 또한 자신의 사이트 / 제품에 연결할 때마다 고지 사항을 게시 해야 합니다.
Andrew Barber
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.