Question

使用以下代码，图像的src仅在＆＃34; width-1.gif＆＃34;之间变化。和＆＃34; width-2.gif＆＃34;。如何修复此代码以使src的值也为＆＃34; width-3.gif＆＃34;和＆＃34; width-4.gif＆＃34;当窗口宽度调整大小时？

var img = document.getElementById('img');

var changeSize = function () {
    if (document.documentElement.clientWidth >= 993) {
        img.setAttribute('src', 'images/width-1.gif')
    } else if (document.documentElement.clientWidth <= 992 || document.documentElement.clientWidth >= 871) {
        img.setAttribute('src', 'images/width-2.gif')
    } else if (document.documentElement.clientWidth <= 870 || document.documentElement.clientWidth >= 786) {
        img.setAttribute('src', 'images/width-3.gif')
    } else if (document.documentElement.clientWidth <= 785) {
        img.setAttribute('src', 'images/width-4.gif')
    }
};

window.addEventListener("resize", changeSize);

Answer 1

使用＆amp;＆amp; 代替 ||

var changeSize = function () {
    if (document.documentElement.clientWidth >= 993) {
        img.setAttribute('src', 'images/width-1.gif')
    } else if (document.documentElement.clientWidth <= 992 && document.documentElement.clientWidth >= 871) {
        img.setAttribute('src', 'images/width-2.gif')
    } else if (document.documentElement.clientWidth <= 870 && document.documentElement.clientWidth >= 786) {
        img.setAttribute('src', 'images/width-3.gif')
    } else if (document.documentElement.clientWidth <= 785) {
        img.setAttribute('src', 'images/width-4.gif')
    }
};

Answer 2

您需要将OR（||）更改为AND（＆amp;＆amp;）。在上面的示例中，第一个条件document.documentElement.clientWidth <= 992将满足992以下的任何值，表达式将自动返回true。请尝试以下代码：

var changeSize = function () {
if (document.documentElement.clientWidth >= 993) {
    img.setAttribute('src', 'images/width-1.gif')
} else if (document.documentElement.clientWidth <= 992 &&     document.documentElement.clientWidth >= 871) {
    img.setAttribute('src', 'images/width-2.gif')
} else if (document.documentElement.clientWidth <= 870 && document.documentElement.clientWidth >= 786) {
    img.setAttribute('src', 'images/width-3.gif')
} else if (document.documentElement.clientWidth <= 785) {
    img.setAttribute('src', 'images/width-4.gif')
}

};

Answer 3

你的第二个if语句检查if width<=922 OR width>=871，对于任何数字，它都是真的。可以使用&&轻松修复它，或者，您可以利用嵌套的for循环：

var changeSize = function () {
    if (document.documentElement.clientWidth >= 993) {
        img.setAttribute('src', 'images/width-1.gif')
    } else if (document.documentElement.clientWidth >= 871) {
        img.setAttribute('src', 'images/width-2.gif')
    } else if (document.documentElement.clientWidth >= 786) {
        img.setAttribute('src', 'images/width-3.gif')
    } else {
        img.setAttribute('src', 'images/width-4.gif')
    }
};

用js改变img的src

3 个答案: