ピクセル値の代わりにパーセンテージ値を得る方法は？

Question

if ($C.getElement(".side-bar")) { 
     $C.setEvent("click",".side-bar",function() { 
      var element=document.getElementById('navbar'); 
      style = window.getComputedStyle(element); 
      alert(style.width); 
      /*if(style.width !== '60px'){ 
       if (this.childElementCount == 2){ 
        var nodes = this.childNodes; 
        for(var i=0; i<nodes.length; i++) { 
         if(nodes[i].className == 'nav nav-second-level'){ 
          if(nodes[i].style['display'] === 'block'){ 
            nodes[i].style.display = ''; 
           } 
          else{ 
            nodes[i].style.display= 'block'; 
           } 

         } 
        } 
       } 
      }*/ 
     }); 
    } 

このコードでは、navbarの幅が全画面の6％と等しくない場合、操作を実行する必要があります（ここではnavbarの幅-to 60px）。これは、ピクセル値の代わりにパーセンテージに変換したときに発生します。ピクセル値ではなくパーセンテージ値を得るのに助けてもらえますか？

は、私はおそらくパーセント値に値を変換する直接的な方法はありません

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)+'%';