В чем разница между значениями, возвращаемыми .width() из jQuery, .css('width') из jQuery и атрибутом .style.width на node?
Мне любопытно, потому что, пытаясь установить равную ширину двух ячеек таблицы, первые два дали мне тот же неправильный ответ. Что они на самом деле измеряют, и почему это не совпадает с значением, которое я вижу в атрибуте .style при просмотре элемента в браузере?
Из width официальная документация
Разница между .css(width) и .width() заключается в том, что последний возвращает значение пикселя без единицы (например, 400), в то время как первое возвращает значение с неизменными единицами (например, 400 пикселей). Метод .width() рекомендуется, когда необходимо использовать ширину элемента в математическом вычислении.
Я бы сказал, что нет разницы между .css('width') и .style.with, поскольку метод css() используется для установки свойств объекта стиля.
Разница между .css('width')/.width() и .style.with заключается в том, что методы jQuery получают вычисленный стиль с помощью window.getComputedStyle( elem, null ). Этот метод используется для чтения фактического свойства после применения CSS и стилей.
В дополнение к ответу Клаудио Реди: см. разницу в реальном времени: 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:
.width() даст вам то, что применяется
.css('width') даст вам то, что находится в атрибуте стиля
.css('width') возвращает атрибут с добавленной единицей измерения, а .width() - нет, он даст вам число в пикселях.
Поэтому, если у вас есть элемент шириной 200 пикселей, .css('width') вернет "200 пикселей", а .width() вернет 200.
Существует также разница между "предполагаемой шириной" и реальной шириной. .width() даст вам ширину содержимого элемента, .css("width") даст вам ширину, предусмотренную таблицей стилей.