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

StackOverflow https://stackoverflow.com/questions/349705

  •  20-08-2019
  •  | 
  •  

Вопрос

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

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

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

Это было полезно?

Решение

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

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

Теперь, когда Джей-Пи правильно указано, что jQuery обладает функциями Внешняя ширина и Внешняя высота которые включают в себя border и padding по умолчанию, а также margin если первый аргумент функции равен true

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

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

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

Другие советы

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

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

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

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

похоже, что внешняя ширина нарушена в последней версии jquery.

Несоответствие возникает, когда

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

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

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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top