Как получить свойство bottom из getComputedStyle в процентах?

Question

[gazes12]

https://codepen.io/gazes12/pen/OJQKJKw

const element = document.querySelector('.order-button__line--bottom');
if(getComputedStyle(element).bottom == '90%'){
    document.querySelector('.order-button').style.display = 'none';
}

Код не хочет работать. Буду рад за помощь!

Comments

[Алексей Абрамов]

Да вроде работает, мб где-то опечатка в классе в html?

[gazes12]

Алексей Абрамов, Когда пишу:

console.log(getComputedStyle(element).bottom); /*Выводит в консоль bottom в пикселях*/
document.querySelector('.order-button').style.display = 'none'; /*Пропадает блок с классом .order-button*/

Классы введены правильно, ну оно не работает(

[Anonymous Penguin]

А проценты относительно чего?

[gazes12]

Anonymous Penguin, https://codepen.io/gazes12/pen/OJQKJKw

[Ankhena]

gazes12,

Классы введены правильно, ну оно не работает(

Уже получили bottom в px, теперь получите высоту родителя, вычислите % одного от другого...

[gazes12]

Ankhena,

const line = document.querySelector('.order-button__line--bottom');
const lineBottom = getComputedStyle(line).bottom;
console.log(lineBottom); /*Выводит -144px*/

const button = document.querySelector('.order-button');
const buttonHeight = button.offsetHeight;
console.log(buttonHeight); /*Выводит 144*/

var percent = buttonHeight / lineBottom * 100;
console.log(percent); /*Выводит Nan*/

[Ankhena]

gazes12, да, JS не умеет делить строки. Нужно сначала из 144px сделать просто 144, а потом делить.

[gazes12]

Ankhena, Не получается перевести в Number, как перевести?

const lineBottom =  Number(getComputedStyle(line).bottom); /*Выдает Nan*/

[Okujava-script]

const lineBottom = parseInt(getComputedStyle(line).bottom);