Как получить ширину элемента в пикселях (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'
Спасибо!
Сколько элементов имеет класс myElement? Рассмотрите возможность использования id, а не a class, поскольку получение ширины двух элементов на самом деле невозможно (или логически понятно IMO).
Я сделал небольшую демоверсию, и для меня она выводит ширину в пикселях для одного элемента span с шириной 100% (для меня он оповещает что-то вокруг 400): http://jsfiddle.net/LqpNK/3/.
Кстати, элемент <span> не может иметь заданную ширину или высоту, поэтому вам не нужно устанавливать их ширину и высоту. Вместо этого отобразите их как элемент block (так что просто замените <span> на <div>) или добавьте display: block; в CSS .myElement).
Может
elt.getBoundingClientRect().width
.css('width') должен возвращать 100%, однако .width() должен (как описано здесь http://api.jquery.com/width/) вернуть единичный размер пикселя. Я создал jsfiddle, чтобы продемонстрировать: http://jsfiddle.net/yxCav/
Из документации jQuery на width()
Разница между .css(width) и .width() заключается в том, что последний возвращает значение пикселя без единицы (например, 400), в то время как первое возвращает значение с неизменными единицами (например, 400 пикселей). Метод .width() рекомендуется, когда необходимо использовать ширину элемента в математическом вычислении.
Таким образом, он возвращает пиксели, если определена ширина пикселя, но вы определяете ширину в%
Я столкнулся с этим в этом сообщении: jQuery width() не возвращает правильное значение в div с сгенерированным контентом. Если div не отображается ранее или загружает контент динамически, функция .width() возвращает процентное значение, но до полного загрузки элемента одна и та же функция .width() возвращает ширину в пикселях.