[英]Chrome Resize event and getComputedStyle
我在调整大小事件和getComputedStyle方法时遇到问题。 当我将窗口的尺寸从例如700px调整为800+ px时,我的元素的高度从79px更改为default(10px)。 但是,当我想通过getComputedStyle获得此值(10px)或在devtools中对其进行检查时,将输出如下内容:76、63、59,最后是10px。 因此,devtools中的height值是在下一个调整大小事件而不是在第一次调整大小时更新的,并且每个调整大小事件之间都有一些中间值。 所以我的问题是,如何获得最终价值? 我尝试使用setTimeout方法调整大小,但这也没有按我预期的那样工作。 我的代码看起来像这样:
window.addEventListener("DOMContentLoaded", function(){
if(window.matchMedia("(min-width:800px)").matches){
default();
}
else{
changeHeight();
}
window.addEventListener('resize',onResizeFunction);
})
function default(){
slot.parentElement.style.height=''
console.log(slot.parentElement.style.height)
console.log(getComputedStyle(slot.parentElement).height) //problem with this line, when called in resize event it's output something like this: 76,63,59 and then 10px;
}
function changeHeight(){
slot.parentElement.style.height="79px";
console.log(slot.parentElement.style.height) //this is ok
}
function onResizeFunction(){
if(window.matchMedia("(min-width:800px)").matches){
default();
}
else{
changeHeight();
}
}
而且我不能使用CSS,因为我正在处理一个旧项目,因此只能使用JS来完成这项工作
请为您的dom提供您的CSS,我敢打赌您有一些过渡
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.