window.getComputedStyle(div) 获取到计算后的属性值，打印出来却是设置的值？

Question

问题遇到的现象和发生背景

div设置width为95%，想用getComputedStyle(div)获取计算后的宽度，然后打印出来。

问题相关代码，请勿粘贴截图

//div

let style = window.getComputedStyle(chartDomBox, null)
console.log(style ) //查里面的width属性值是 width: "920.25px"
console.log(style .width) //95%

//方法
function getStyle(ele){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null);
}else{
return ele.currentStyle;
}
}
function chartSize(container, charts) {
const wi = getStyle(container,"width").width;
const hi = getStyle(container,"height").height;
charts.style.width = wi;
charts.style.height = hi;
}

//style
.chart-main-box{
height: 80vh;
width: 90%;
}

运行结果及报错内容

console.log(style) //查里面的width属性值是 width: "920.25px"
console.log(style.width) //结果为95%

我的解答思路和尝试过的方法

我想要达到的结果

console.log(style.width) //结果为"920.25px"

Answer 1

.chart-main-box{
      height: 80vh;
      width: 90%;
      background: rgb(200,0,0);
    }
    .chart-main-box div{
      width: 95%;
      height: 40vh;
      background: rgb(0,0,200,0.5)
    }

  <div class="chart-main-box">
    <div id="chartDomBox"></div>
  </div>

  window.onload = () => {
      let chartDomBox = document.getElementById('chartDomBox')
      let style = window.getComputedStyle(chartDomBox, null)
      console.log('style',style);
      console.log('inlineSize',style.inlineSize)
      console.log('width',style.width)
      console.log('webkitLogicalWidth',style.webkitLogicalWidth)
    }
    window.onresize = () =>{
      let chartDomBox = document.getElementById('chartDomBox')
      let style = window.getComputedStyle(chartDomBox, null)
      console.log('style',style);
      console.log('inlineSize',style.inlineSize)
      console.log('width',style.width)
      console.log('webkitLogicalWidth',style.webkitLogicalWidth)
    }

根据你的描述，我打印了这几个值，结果都是具体的 px，不知道你具体那里有问题