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

Question

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

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

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

Answer 1

[Update]

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

Теперь, как правильно указывает JP , jQuery имеет функции externalWidth и 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

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

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

Расхождение возникает, когда

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

Answer 5

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

Answer 6

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