Höhe eines Elements dynamisch überprüfen

Question

Ich möchte die Höhe eines Elements bei jeder Änderung der Site überprüfen, da die Größe des Ansichtsfensters oder ein Klickereignis geändert wurde.

Im Moment bin ich mit dem folgenden Code:

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

Es ist möglich, dass die Höhe der „Kopf“ ändert. Daher muss ich die tatsächliche Höhe überprüfen, wenn Änderungen an der Site/im Ansichtsfenster vorgenommen werden.

Gibt es eine Möglichkeit, dies zu tun?

Answer 1

Sie auf Fenstergröße ändern überprüfen

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

Answer 2

können Sie onResize Ereignis-Listener von Javascript verwenden

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) 

Sie können zwei verschiedene Ereignis-Listener binden und die gleiche Funktion wie ein Rückruf übergeben wenn Sie Code-Logik teilen und Redundanz reduzieren möchten.

Answer 4

Meine Lösung:

$(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'; 
    } 
}); 

Der Timeout ist für die richtige Höhe nach dem Klick und eine Animation.