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';
                                }

                        }
                    }
                }
            }*/
        });
     }

在这段代码中，我需要检查导航栏的宽度，如果导航栏的宽度不等于总屏幕的6％，那么我需要执行操作（这里给出一个示例，其中navbar的宽度等于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

可能没有直接的方法将值转换为百分比值。

虽然没有经过测试，但您可以尝试这种方式

{{1}}

如何获得百分比值而不是像素值？

1 个答案: