动态检查元素的高度

Question

我想检查每次网站更改时元素的高度，因为视口调整大小或点击事件。

目前我使用下面的代码：

jQuery(function ($) { 
    var height = document.getElementById("head").offsetHeight; 

    var x = document.getElementsByClassName("dropdown-menu"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
     x[i].style.top = height + 'px'; 
    } 
}); 

这有可能是的“头”的高度变化。所以我需要检查实际高度，如果在网站/视口有任何更改。

有没有办法做到这一点？

Answer 1

您可以检查窗口调整

$(window).resize(function() { 
    //check element height 
}); 

Answer 2

您可以使用JavaScript在onResize事件侦听器

var header= document.getElementById("head") 
header.addEventListener('onresize', function(){ 
// do your code here 
}); 

Answer 3

var element = document.getElementById("head"), 
    height; 

function eventHandler() { 

    height = element.offsetHeight; 
    console.log(height); 

    // rest of your code 

} 

window.addEventListener('resize', eventHandler) 
element.addEventListener('click', eventHandler) 

您可以绑定两个不同的事件侦听器，并通过相同的功能回调如果你想共享代码逻辑并减少冗余。

Answer 4

我的解决办法：

$(window).ready(function() { 
    var height = document.getElementById("head").offsetHeight; 

    var x = document.getElementsByClassName("dropdown-menu"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
     x[i].style.top = height + 'px'; 
    } 
}); 

$(window).click(function() { 
    setTimeout(function() { 
     var height = document.getElementById("head").offsetHeight; 

     var x = document.getElementsByClassName("dropdown-menu"); 
     var i; 
     for (i = 0; i < x.length; i++) { 
      x[i].style.top = height + 'px'; 
     } 
    }, 500); 
}); 

$(window).resize(function() { 
    var height = document.getElementById("head").offsetHeight; 

    var x = document.getElementsByClassName("dropdown-menu"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
     x[i].style.top = height + 'px'; 
    } 
}); 

超时对于点击动画后正确的高度。