답변:
[최신 정보]
원래 답변은 jQuery 1.3 이전에 작성되었으며 전체 너비를 계산하기에 적절하지 않은 시점에 존재했던 기능입니다.
이제 JP가 올바르게 설명 했듯이 jQuery에는 outerWidth 및 outerHeight 함수가 있으며 기본적으로 border
and 를 포함 하며 함수의 첫 번째 인수가padding
margin
true
[원래 답변]
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에서 패딩 또는 여백 값을 변경하더라도 항상 정확한 계산 값을 얻을 수 있습니다
parseInt
S는 변경 될 수 +
코드가 더 간결하게 연산자. 그래서, parseInt(theDiv.css("padding-left"), 10)
로 전환 할 수 +theDiv.css("padding-left")
... 등
이 답변에 걸림돌이되는 사람은 jQuery now (> = 1.3)에 패딩 / 테두리를 포함하여 너비를 검색하는 outerHeight
/ outerWidth
함수 가 있음을 알아야합니다.
$(elem).outerWidth(); // Returns the width + padding + borders
여백도 포함 시키려면 간단히 다음을 전달하십시오 true
.
$(elem).outerWidth( true ); // Returns the width + padding + borders + margins
간단히하기 위해 나는 일부 기능에서 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>