Question

我正在处理的项目在屏幕上显示这些卡片，这些卡片的屏幕宽度和顶部的选择器都会发生变化。我想要做的是确保在这里创建的变量：

var element = document.getElementById('front'),
    style = window.getComputedStyle(element),
    width = style.getPropertyValue('width');

随着屏幕宽度的变化和卡片本身宽度的变化，

会不断更新。顺便说一句，宽度是卡的宽度，它只显示原始值，而不是更改值。我通过在更改div的实际宽度后尝试在Chrome中的控制台窗口中记录它来证明这一点。

Answer 1

您可以将事件附加到resize event，如下所示：

window.onresize = function() {  };

Answer 2

如果您需要在调整大小停止时更新您的值，那么您可能还需要使用去抖功能来减少CPU负载。因为在每个像素更改时您将获得DOM元素，这在DOM操作方面有点慢< / p>

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        }, wait);
        if (immediate && !timeout) func.apply(context, args);
    };
};

var element, width, style;
var myEfficientFn = debounce(function() {
  element = document.getElementById('front'),
  style = window.getComputedStyle(element),
  width = style.getPropertyValue('width');
}, 250);

window.addEventListener('resize', myEfficientFn);

动态更新包含CSS样式的JS变量

2 个答案: