Общая ширина элемента (включая заполнение и границу) в jQuery

Как и в теме, как можно получить общую ширину элемента, включая его границу и заполнение, используя jQuery? У меня есть плагин jQuery dimensions и работает .width () на моем 760px-wide, 10px padding DIV возвращает 760.

возможно, я делаю что-то неправильно, но если мой элемент проявляется как 780 пикселей в ширину и Firebug говорит мне, что на нем есть 10px обивка, но вызов .ширина () дает только 760, мне было бы трудно понять, как это сделать.

Спасибо за любую предложения.

6 160
jquery dimensions

6 ответов:

[обновление]

исходный ответ был написан до jQuery 1.3, и функции, которые существовали в то время, когда они не были достаточными сами по себе для вычисления всей ширины.

теперь, как J-P правильно заявляет, jQuery имеет функции outerWidth и outerHeight, которая включает border и padding по умолчанию, а также margin если первый аргумент функции true

[оригинальный ответ]

The 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

216

любой другой наткнувшийся на этот ответ должен отметить, что jQuery now (>=1.3) имеет outerHeight/outerWidth функции для получения ширины, включая заполнение / границы, например

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

чтобы включить маржу, а также, просто пройти true:

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

похоже, что outerWidth сломан в последней версии jquery.

несоответствие происходит, когда

внешний div плавает, внутренний div имеет набор ширины (меньше, чем внешний div) внутренний div имеет style= "margin:auto"

2

просто для простоты я инкапсулировал отличный ответ Андреаса греча выше в некоторых функциях. Для тех, кто хочет немного вырезать-и-вставить счастье.

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

те же браузеры могут возвращать строку для ширины границы, в этом 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>
0