Какая разница между jQuery.width(), style.width и jQuery.css('width')?

В чем разница между значениями, возвращаемыми .width() из jQuery, .css('width') из jQuery и атрибутом .style.width на node?

Мне любопытно, потому что, пытаясь установить равную ширину двух ячеек таблицы, первые два дали мне тот же неправильный ответ. Что они на самом деле измеряют, и почему это не совпадает с значением, которое я вижу в атрибуте .style при просмотре элемента в браузере?

Ответ 1

Из width официальная документация

Разница между .css(width) и .width() заключается в том, что последний возвращает значение пикселя без единицы (например, 400), в то время как первое возвращает значение с неизменными единицами (например, 400 пикселей). Метод .width() рекомендуется, когда необходимо использовать ширину элемента в математическом вычислении.

Я бы сказал, что нет разницы между .css('width') и .style.with, поскольку метод css() используется для установки свойств объекта стиля.

Разница между .css('width')/.width() и .style.with заключается в том, что методы jQuery получают вычисленный стиль с помощью window.getComputedStyle( elem, null ). Этот метод используется для чтения фактического свойства после применения CSS и стилей.

Ответ 2

В дополнение к ответу Клаудио Реди: см. разницу в реальном времени: http://jsfiddle.net/vovkss/kPXaB/

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

Обратите внимание, что .style.width применяется только к встроенным стилям.

HTML:

<div id="mydivInlineStyle" style="width: 10cm"><b>Inline style:</b>
</div>

<div id="mydivExternalStylesheet"><b>External stylesheet:</b> 
</div>

CSS:

div { 
  width: 10cm; 
  border: 10px solid blue; padding: 11px; margin: 12px; 
  background: aqua; white-space: pre; 
}

JS:

$('div').each(function(){ 
  $(this).append(
    'jQuery width(): ' + $(this).width() + "\n" + 
    '.css(\'width\'): ' + $(this).css('width') + "\n" + 
    '.style.width: ' + this.style.width
  ); 
});

Выход:

Inline style: 
  jQuery width(): 378 
  .css('width'): 378px 
  .style.width: 10cm

External stylesheet: 
  jQuery width(): 378 
  .css('width'): 378px 
  .style.width:

Ответ 3

.width() даст вам то, что применяется .css('width') даст вам то, что находится в атрибуте стиля

Ответ 4

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

Поэтому, если у вас есть элемент шириной 200 пикселей, .css('width') вернет "200 пикселей", а .width() вернет 200.

Ответ 5

Существует также разница между "предполагаемой шириной" и реальной шириной. .width() даст вам ширину содержимого элемента, .css("width") даст вам ширину, предусмотренную таблицей стилей.