Question

我有这个Javascript只会触发一次，然后在再次调整大小后再做任何事情。

我希望它每次调整窗口大小时运行该函数。

var ld = document.getElementById('loading'),
    w = document.body.clientWidth,
    m = document.getElementsByTagName('main')[0],
    mw = w - 140;
document.addEventListener("DOMContentLoaded", function () {
    'use strict';
    ld.className += "loaded";
    setTimeout(function () {ld.parentElement.removeChild(ld); }, 500);
    window.addEventListener('resize', function () {
        m.style.width = mw + 'px';
    });
});

Answer 1

var ld = document.getElementById('loading'),
    w = document.body.clientWidth,
    m = document.getElementsByTagName('main')[0],
    mw = w - 140;

假设当时身体的clientWidth为900。您现在在当前范围内有以下变量：

ld: <some DOM element>
w: 900
m: <main element>
mw: 760

加载页面DOM时，绑定resize事件：

window.addEventListener('resize', function() {
    m.style.width = mw + 'px';
});

每次调整窗口大小时，主要元素的css宽度设置为“760 px”。它总是760.你想要的是每次调整窗口大小时获得页面的宽度。

m.style.width = (document.body.clientWidth - 140) + 'px';

Javascript onresize仅触发一次

1 个答案: