При попытке вычислить ширину скрытого элемента я обнаружил, что jquery.width() возвращает 0 для этой ширины элементов.
Я выяснил, что использование jquery.css('width') вернет правильную ширину, используя объявленную ширину стиля (даже если это значение отличается от начальной таблицы стилей). Проблема в том, что метод css ('width') возвращает строку, обычно в формате "100 пикселей". Мой вопрос решает: как получить номер из строки "100px"? Есть ли простой способ?
Если он всегда возвращается в формате px, "100px", "50px" и т.д. (т.е. не "em" или процентов), вы можете просто...
var width = parseInt($("#myelem").css("width"),10); // always use a radix
или
var width = parseInt(element.style.width,10); // always use a radix
Он игнорирует суффикс "px", поэтому вам должно быть хорошо идти.
Хотя в глубине души я думаю, что что-то не так, если $( "# myelem" ). width() не работает.
Примечание о скрытых элементах.
Если вы добавляете jQuery для постепенного улучшения вашей страницы, вычисляемый элемент должен быть видимым, когда страница загружается первой. Таким образом, вы должны получить ширину, прежде чем сначала скрыть элемент. Посредством этого будет работать $( "# myelem" ). Width() будет работать.
var myWidth = 0;
$(document).ready( function () {
myWidth = $("#myelem").width();
$("#myelem").hide();
});
Вы можете удалить нечисловые выражения с регулярным выражением, а затем просто преобразовать в число. Это работает независимо от того, как вы определяете ширину (px, em, %, pt). Сохраняет десятичные точки тоже.
ванильный javascript
Number(elem.style.width.replace(/[^\d\.\-]/g, ''));
jQuery
Number($elem.css('width').replace(/[^\d\.\-]/g, ''));
О, я придумал:
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number
Теперь я только надеюсь, что jquery allways возвращает тот же стиль строки: "100px"
Я бы придерживался .width(), потому что на самом деле он получил вычисляемую ширину вместо ширины css. Вместо того, чтобы скрывать его с помощью .hide() (display: none), вы можете скрыть его с помощью .css('visible', 'hidden'), тогда .width() должен работать.
из моего комментария
Если вы не хотите менять свой .hide(), тогда вы можете применить visible: hidden и после этого .show(), а затем измерить высоту. После того, как вы измерили его, измените это. Объекты по-прежнему влияют на макет страницы, когда они скрыты visible: hidden - остерегайтесь этого.
Чтобы избежать тегов, которые беспорядочны с макетом, вы можете установить абсолютное положение, переместить его в тег тела и затем измерить.
В простом JavaScript:
parseInt('100px', 10)
Работает с "100em", "100%" и даже с "100". Нет необходимости в шаблонах регулярных выражений.