Question

我有和if / else语句，我用来调整背景视频的大小，虽然我遇到一个错误，其中一半的语句if(video.style.height <= window.innerHeight && fired == false)只在页面调整大小时触发一次...声明的后半部分，else部分将继续连续发射，没有错误。你们有什么理由可以看到吗？我是一个JavaScript菜鸟，很抱歉，如果它是显而易见的。

JS：

window.onresize = function() {
    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var video = document.getElementById("test");
    var videoWidth = video.style.width;
    var videoHeight = video.style.height;

    console.log(videoHeight);
    console.log(fullHeight);

    var fired = false;

    if(video.style.height <= window.innerHeight && fired == false) {
        video.style.height = fullHeight + 'px';
        var fullWidthAdjusted = fullHeight * 1.7777777;
        video.style.width = fullWidthAdjusted + 'px';
        console.log(videoWidth);
        console.log("If statement working");
        fired = true;
    } else {
        video.style.width = fullWidth + 'px';
        var fullHeightAdjusted = fullWidth * .5625;
        video.style.height = fullHeightAdjusted + 'px';
        console.log("Wrong part of statement working");
        fired = true;
    }
};

Answer 1

我不知道它是否能解决您的问题，但element.style.height的字符串格式为"1234px"，而window.innerHeight的数字为1234。

编辑：

而不是video.style.height尝试parseInt(video.style.height, 10)。

Answer 2

高度样式是字符串，而不是数字。在设置样式之前，它将返回一个空字符串，这不是窗口内部高度的字符串表示（隐式转换），因此执行第一个块。

设置样式后，它将返回附加px的高度，并且不小于窗口内部高度的字符串表示形式，因此执行第二个块。

您可以使用parseInt方法将样式设为数字：

if(parseInt('0' + video.style.height, 10) <= window.innerHeight && fired == false) {

字符串之前的'0' +是为了使您首先变为零的空字符串。否则它将是NaN并且比较将失败。

Answer 3

因为if语句中的第二个条件是fired === false，所以在第一次调整大小后不正确，因为您在fired = true和if块内都设置了else 。

如果您希望多次触发，请删除&& fired === false

上半部分＆＃39; if语句＆＃39;在javascript中只发射一次

3 个答案: