javascript - 你能根据div的大小调用JavaScript方法吗？

Question

我想知道除了jquery之外是否还有其他方法可以根据div的大小是否达到一定的大小范围来运行JavaScript代码？

因此，如果用户将浏览器窗口拖动到屏幕的一半左右，我想在 JavaScript 中设置一个变量值，如果他们再次使其全屏显示(这使得 div 更大)，我希望设置该变量值回到原来的值。

总而言之，我想根据 div 的大小来回切换一个 JavaScript 变量，使其小于或大于某个指定的断点大小(例如 200px)。

这可能吗？

Answer 1

您可以使用.offsetWidth和.offsetHeight属性。

render();

function render() {
    var width = document.getElementById('yourDivID').offsetWidth;
    if (width < 200) {
        foo();
    }
    else {
        bar();
    }
}

window.addEventListener('resize', render);