Получить ширину элемента в px

Как получить ширину элемента в пикселях (px)? jQuery всегда возвращает значение в процентах (pct).

HTML

<span class="myElement"></span>

CSS

.myElement {
  float: left;
  width: 100%;
  height: 100%;
}

JavaScript

$('span.myElement').css('width') // returns '100%'
$('span.myElement').width() // returns '100'

Спасибо!

Ответы

Ответ 1

Сколько элементов имеет класс myElement? Рассмотрите возможность использования id, а не a class, поскольку получение ширины двух элементов на самом деле невозможно (или логически понятно IMO).

Я сделал небольшую демоверсию, и для меня она выводит ширину в пикселях для одного элемента span с шириной 100% (для меня он оповещает что-то вокруг 400): http://jsfiddle.net/LqpNK/3/.

Кстати, элемент <span> не может иметь заданную ширину или высоту, поэтому вам не нужно устанавливать их ширину и высоту. Вместо этого отобразите их как элемент block (так что просто замените <span> на <div>) или добавьте display: block; в CSS .myElement).

Ответ 2

Может

elt.getBoundingClientRect().width

Ответ 3

.css('width') должен возвращать 100%, однако .width() должен (как описано здесь http://api.jquery.com/width/) вернуть единичный размер пикселя. Я создал jsfiddle, чтобы продемонстрировать: http://jsfiddle.net/yxCav/

Ответ 4

Из документации jQuery на width()

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

Таким образом, он возвращает пиксели, если определена ширина пикселя, но вы определяете ширину в%

Ответ 5

Я столкнулся с этим в этом сообщении: jQuery width() не возвращает правильное значение в div с сгенерированным контентом. Если div не отображается ранее или загружает контент динамически, функция .width() возвращает процентное значение, но до полного загрузки элемента одна и та же функция .width() возвращает ширину в пикселях.