Javascript onresize 仅触发一次

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 加载时，您绑定(bind)调整大小事件:

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

每次调整窗口大小时，都会将主元素的 css 宽度设置为“760 px”。它始终是 760。您想要的是每次调整窗口大小时获取页面的宽度。

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