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"
.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,不知道你具体那里有问题
看起来你只是给style赋了新值,但是没有应用到节点上,你应该有代码实现把charts.style应用到chartDomBox节点上