Преобразовать строку ширины CSS в обычное число

Question

При попытке вычислить ширину скрытого элемента я обнаружил, что jquery.width () возвращает 0 для ширины этого элемента.

Я обнаружил, что использование jquery.css ('width') вернет правильную ширину при использовании объявленной ширины стиля (даже если это значение отличается от исходной таблицы стилей). Проблема в том, что метод css ('width') возвращает строку, как правило, в стиле "100px". Мой вопрос разрешается следующим образом: как извлечь число из строки «100px»? Есть ли простой способ?

Answer 1

Если он всегда возвращает в формате 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();
});

Answer 2

В простом JavaScript:

parseInt('100px', 10)

Работает с "100em", "100%" и даже с: "100".Нет необходимости в каких-либо шаблонах регулярных выражений.

Answer 3

Вы можете удалить нечисловые значения с помощью регулярного выражения, а затем просто преобразовать их в число.Это работает независимо от того, как вы определяете ширину (px, em, %, pt).Сохраняет также десятичные точки.

ванильный javascript

Number(elem.style.width.replace(/[^\d\.\-]/g, ''));

jQuery

Number($elem.css('width').replace(/[^\d\.\-]/g, ''));

Answer 4

О, я придумал: <br> new Number($elem.css('width').slice(0, -2));<br> //to extract the 'px' and return a regular number

Теперь я только надеюсь, что jquery всегда возвращает одну и ту же строку: "100px"

Answer 5

Я бы придерживался .width(), потому что он фактически получает вычисленную ширину вместо ширины CSS.Вместо того, чтобы скрывать это с помощью .hide() (display: none), вы можете скрыть это с помощью .css('visible', 'hidden'), тогда .width() должно работать.

из моего комментария Если вы не хотите изменять .hide() ´s, вы можете применить visible: hidden, а затем .show() и затем измерить высоту.После того, как вы измерили это, переверните это.Объекты по-прежнему влияют на макет страницы, когда они скрыты visible: hidden - остерегайтесь этого.

Чтобы избежать тегов, которые мешают макету, вы можете установить абсолютное положение, переместить его в тег body и затемизмерение.