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


164

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

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

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

Ответы:


216

[Обновить]

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

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


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

Для 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


3
В целом, я бы скорее поверил в jQuery, чем в собственные расчеты. Проблема в том, что функция width () на самом деле не указывает, что она делает в случае «box-sizing: border-box». Я только что проверил это, и он возвращает внутреннюю ширину, исключая отступы и т. Д. Это может или не может быть правильным; разные люди могут ожидать разные вещи. Таким образом, приведенный выше пример кода действительно работает, но, возможно, это не самый надежный способ. Как указано в некоторых других ответах, я бы рекомендовал вместо этого использовать функцию externalWidth (). По крайней мере, это обещает то, что предполагается в документации.
Ян Зич

4
Функция externalWidth / outerHeight не существовала, когда я писал этот ответ.
Андреас Греч

Просто быстрый комментарий к моему старому коду, если кто-то все еще использует его; parseInts может быть изменен на +оператор , чтобы сделать код более лаконичным. Таким образом, parseInt(theDiv.css("padding-left"), 10)можно обратиться к и +theDiv.css("padding-left")т.д ...
Андреас Греч

182

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

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

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

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

3
У меня нет возможности редактирования, но я бы изменил первый комментарий на: // Возвращает ширину + отступы + границы и изменил второй комментарий на // Возвращает ширину + отступы + границы + поля
CtrlDot

2

похоже, что externalWidth не работает в последней версии 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;
}

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 по саморекламе . Также обратите внимание, что необходимо размещать заявление об отказе от ответственности при каждой ссылке на свой собственный сайт / продукт.
Эндрю Барбер
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.