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

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

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

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

Ответы

Ответ 1

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

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

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

[Исходный ответ]

Метод width больше не требует плагина dimensions, потому что он добавлен в jQuery Core

Что вам нужно сделать, так это получить атрибуты padding, margin и border этого конкретного 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

Ответ 2

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

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

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

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

Ответ 3

выглядит как наружная ширина разбита в последней версии jquery.

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

внешний div перемещается, внутренний div имеет установленную ширину (меньшую, чем внешний div) внутренний div имеет стиль = "margin: auto"

Ответ 4

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

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

Ответ 5

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

Ответ 6

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