Получение ширины css в виде числа вместо процента
В этой упрощенной версии моего кода я пытаюсь извлечь ширину css в виде числа без прикрепленного процента. Исследуя решение, я нашел это: Получить число для значения стиля БЕЗ «px;» суффикс, который решает проблему. Однако при попытке воспроизвести тот же результат я получаю
barSize: NaN
вместо
barSize: 90;
Обновление: этот вопрос не спрашивает, как получить свойство, как в
document.querySelector('.defaultBar').style.width
который дает:
barSize: 90%
но как получить свойство без суффикса, как в
parseInt(document.querySelector('.defaultBar').style.width, 10);
что должно дать: барРазмер: 90
без суффикса %, но вместо него дает NaN.
<!DOCTYPE html>
<head>
<meta charset = "utf-8">
<style>
.defaultBar {
background-color: green;
height: 4px;
width: 90%;
}
</style>
</head>
<body>
<div class = "defaultBar"></div>
<script>
const barSize = parseInt(document.querySelector('.defaultBar').style.width, 10);
console.info("barSize: ", barSize);
</script>
</body>
</html>вы получаете свойство, затем применяете parsetInt.. ваша проблема заключается в получении свойства
Вы говорите, что мне нужно сделать defaultBar = document.querySelector('.defaultBar'), тогда используйте функцию parseInt(), например parseInt(defaultBar, 10);
вы неправильно получаете значение ширины, вы не читаете 90% ... дубликат покажет вам, как правильно прочитать это 90%. Если он у вас есть, то это легко (перейдите по ссылке в дубликате: developer.mozilla.org/en-US/docs/Web/API/Window/…, а также подумайте о том, чтобы прочитать весь ответ, чтобы лучше понять)
Разве вы не можете просто взять значение "90%" и удалить все нечисловые символы из строки, прежде чем передать его в parseInt()? Лично я неравнодушен к регулярным выражениям, но я уверен, что есть много способов удалить нецифры из строки. parseInt возвращает NaN, потому что не может обрабатывать дерево % или любой нечисловой символ как цифру.
У вас читать самый верхний ответ в связанный вопрос? Используйте getComputedStyle, он делает то, что вы хотите.
@TheVee «самый верхний ответ» зависит от ваших настроек, которые можно настроить для упорядочения ответов по «активным», «самым старым» или «голосам». По этой причине при ссылке на конкретный ответ лучше вместо этого поделиться ссылкой на этот ответ. Кроме того, со временем ответы могут всплывать вверх или вниз в различных списках.
Вы уверены, что document.querySelector('.defaultBar').style.width дает вам значение 90%? Получили ли вы console.info такой результат? Используемый мной ответ дает пустую строку. Другой ответ дает мне значение в 648.8px вместо 90%. Возможно, вам придется использовать некоторое деление, чтобы преобразовать число пикселей в %. В любом случае, вы можете использовать регулярное выражение для удаления нечисловых символов перед отправкой в parseInt. Пример: const str = '90%'; const regex = /^(\d*)(.*)$/gm; const subst = '$1'; const result = str.replace(regex, subst); console.info('Substitution result: ', result); // 90
Вот онлайн-тестер регулярных выражений: regex101.com/r/YIrLGB/4 с примером кода, чтобы сохранить только цифры и десятичный знак, удаляя все остальные символы (например, px или %). Обратите внимание, что это улучшение моего предыдущего комментария, так как в этом сохранится десятичная точка, если она есть. Существует ссылка generate code, которая сгенерирует образец javascript (как в моем предыдущем комментарии), который затем вы можете изменить по мере необходимости, чтобы он соответствовал вашей кодовой базе. Обновлено из предыдущего комментария: regex = /^([\d\.]*)(.*)$/gm; // 90 или // 648,8 (от 90% или 648,8 пикселей соответственно)
document.querySelector('.defaultBar').style.width не дает того, что я думал, что дал. В итоге я использовал getComputedstyle для решения проблемы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ссылка, которую вы дали, предлагает, как получить свойство, а не свойство без суффикса