Блог

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

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

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

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

ДЕМОНСТРАЦИЯ:

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

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

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

консоль.вызовы журнала :

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

.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) , чтобы поддерживать согласованность во всех ваших темах.

Редактировать:

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

Вы должны учитывать это поле тела при выполнении своих вычислений.

Поскольку ваш JavaScript не обновляется динамически, и это не в jsFiddle, я не могу его дальше тестировать. Когда я устанавливаю значение margin равным 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 пикселей;

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

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

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

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