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

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

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

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

164
задан Priyanga 18 October 2019 в 13:33
поделиться

2 ответа

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

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

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

<час>

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

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

, Что необходимо сделать, получают дополнение, поле и значения ширины рамки того конкретного отделения и добавляют их к результату 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

217
ответ дан Community 23 November 2019 в 21:12
поделиться

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

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

Для включения поля также просто передайте true:

$(elem).outerWidth( true ); // Returns the width + padding + borders + margins
182
ответ дан Cœur 23 November 2019 в 21:12
поделиться
Другие вопросы по тегам:

Похожие вопросы: