$ (element) .outerWidth (true) сообщает по-разному в зависимости от темы?

Question

У меня есть скрипт jQuery, который устанавливает ширину элемента на 50% с помощью обычного атрибута ширины CSS.

Если я затем выведу outerWidth(true) этого элемента, чтобы получить точное значение пикселя, оно иногда не соответствует $(window).width()/2 - это основано на теме, которая есть на сайте.К сожалению, я не могу вывести демо-версию для этого поведения в Интернете.

Есть ли какой-либо определенный атрибут CSS, который может вызвать такую ​​разницу?

Проблема в том, что outerWidth() сообщает, например, 564px, но когда я проверяю в инспекторе Safari, он говорит 580.Поэтому возвращаемое значение этой функции неверно, и я хотел бы знать, в чем причина.

Демонстрация:

http://users.telenet.be/prullen/this/

http://users.telenet.be/prullen/that/

Содержимое (серая область, когда вы нажимаете на красную вкладку) должно быть скрыто при загрузке через отрицательное поле, но из-за (неправильного?) Возврата jquery оно отсутствует в одной из этих тем(слегка отображается).

вызовы console.log:

        console.log('window width / 2 = ' + $(window).width()/2);
        console.log('doc width /2  = ' + $(document).width()/2);

        console.log('width = ' + defaults.boxWidth);
        console.log('width = ' + $slider.css('width'));
        console.log('width = ' + $slider.width());
        console.log('width = ' + $slider.outerWidth());
        console.log('width = ' + $slider.outerWidth(true));

Answer 1

.outerWidth([includeMargin]) - Возвращает ширину элемента вместе с отступами слева и справа, границей и (необязательно) полем в пикселях.

---

Установка параметра [includeMargin] на true добавляет поля к этому числу:

.outerWidth(true) - Возвращает ширину элемента вместе с отступами слева и справа, границей, и полем в пикселях.

---

.width() - Возвращает значение без единиц измерения пикселей, не включая отступы слева и справа, границы или поля.

В соответствии с документами jQuery разница только между .width() и .css(width) заключается в том, что последняя включает единицы измерения ('px'), где width() просто возвращает число (без 'px' «).

Так что, если по определению width() не включает поля, отступы и границы, то ни один не может css(width)

---

У меня есть скрипт jQuery, который устанавливает ширину элемента на 50% через обычный атрибут ширины CSS.

Это установка самого элемента (не включая поля, отступы или границы) на 50% его контейнера. Если окно является контейнером, то ширина элемента будет составлять 50% от этого.

Пример: С окном шириной 1160 пикселей ваш сценарий создаст элемент с 50% шириной 1160 пикселей или 580 пикселей (не включая поля, отступы или границы).

Если затем вывести outerWidth(true) этого элемента, чтобы получить точное значение в пикселях, иногда оно не соответствует $(window).width()/2.

Когда вы смотрите на тот же элемент с outerWidth(true), теперь вы добавляете поле, отступ или границы к числу.

Используя мой тот же пример: С окном 1160 пикселей, $(window).width()/2 будет 580. Предполагая, что ваш элемент также 580 пикселей, .outerWidth(true) добавит (или вычтет) поля, добавит границу и добавьте отступ к самому элементу, чтобы вы не получили 580, если поля, отступы и границы не равны нулю.

Так что, естественно, с другой "темой" (используя ваше определение), элемент, вероятно, будет иметь разные отступы, границы и поля. Я не могу сказать наверняка, так как я не вижу ни одного вашего кода.

Просто используйте .width() вместо .outerWidth(true), чтобы обеспечить согласованность всех ваших тем.

---

EDIT:

В консоли Safari я вижу поле на body, вызывающее то, что вы описываете. Внутри consolidated-screen-2.css листа у вас есть 20 пикселей слева.

При расчете необходимо учитывать это поле для тела.

Так как ваш JavaScript не обновляется динамически, и его нет в jsFiddle, я больше не могу его тестировать. Когда я устанавливаю поле 0 в DOM, я не могу вызвать JS для пересчета чисел, не перезагружая страницу, что, разумеется, стирает мое переопределение DOM.

Одним из решений было бы придерживаться .width() (игнорировать поля) во всех ваших расчетах.

Альтернативное решение, по-видимому, включает установку поля body на ноль.

---

РЕДАКТИРОВАТЬ 2:

Вы продолжаете говорить, что он сообщает неправильно, но у меня есть полупрозрачная утилита линейки пикселей, наложенная на мой экран для следующего, и все проверяется ...

Эта страница в окне шириной 1228 пикселей. Правитель проверяет это.

console.log('width = ' + $slider.outerWidth(true)); = 1188

1188 плюс 40 пикселей (body поля слева / справа) = 1228 (аналогично линейке)

Ящик открыт, и линейка проверяет, что он ровно 614 пикселей в ширину (без правой границы).

console.log('width = ' + $slider.css('width')); = 594 px;

594 плюс 20 пикселей (body левое поле) = 614 (аналогично линейке)

console.log('width = ' + $slider.width()); = 594

594 плюс 20 пикселей (body левое поле) = 614 (аналогично линейке)

Answer 2

width и outerWidth(true) должны быть двумя разными вещами. Первый не включает отступы, границы или поля - второй -.

Если вы хотите, чтобы outerWidth составлял ровно половину ширины окна, вам придется явно указать эти вещи в:

var $el = $('#el');
var wid = $(window).width()/2
     - parseInt($el.css('padding-left')) - parseInt($el.css('padding-right'))
     - parseInt($el.css('border-left')) - parseInt($el.css('border-right'))
     - parseInt($el.css('margin-left')) - parseInt($el.css('margin-right'))
// assumes all those things are set using pixels, not em or percent or something
$el.width(wid);