Как получить процентное значение вместо значения пикселя?

Question

В этом коде мне нужно проверить ширину навигатора, если ширина навигационной панели не равна 6% от общего экрана, тогда мне нужно выполнить операцию (здесь приведен пример ширины навигационной системы, равной -to 60px). Это случается, когда я помещаю преобразованную ширину в проценты вместо пикселя. Может ли кто-нибудь помочь мне получить процентное значение вместо значения пикселя?

Я добавил структуру NavBar на ниже

document.getElementById("bttn").addEventListener("click" , function(){ 
 
document.getElementById("navbar").classList.add("navbar-after-click"); 
 
});

body,html{ 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
#navbar{ 
 
height:300px; 
 
    background-color:blue; 
 
    } 
 
.navbar{ 
 
width:15%; 
 
} 
 
.navbar-after-click{ 
 
    width:6%; 
 
}

<div id="navbar" class="navbar"> 
 

 
</div> 
 
<button id="bttn">click me to change the width to 6%</button>

Answer 1

Вероятно, нет прямого способа преобразования значения в процентах.

Хотя не проверял, но вы можете попробовать этот способ

var yourElement = document.getElementById('someId'); 
var elemWidth = window.getComputerStyle(yourElement).getPropertyValue("width"); 
var parent = yourElement.parentNode; 
var parentWidth =window.getComputerStyle(parent).getPropertyValue("width"); 
var calculatePercentage = (100*parseFloat(elemWidth)/parentWidth)+'%';