Question

我的JS功能＆＃34;设置尺寸样式＆＃34;将不会调用bodysmall CSS样式表无论我制作多少小屏幕width (screen.width <=480).

但是，如果我反转函数，该函数将调用bodysmall CSS样式表。

(screen.width >=480)

这向我证明了JS功能正在发挥作用。我怀疑我的事件处理程序有问题。我对JavaScript不熟悉，所以任何帮助都会非常感激。

这是我的代码。

<script type="text/javascript">
function setStyleForSize() {
    if (screen.width <= 481) {
        document.body.className = "bodySmall";
    }

else {
        document.body.className = "bodyNormal";
    }

}


function addEventHandler(oNode, evt, oFunc) {
    if (typeof(window.event) != "undefined")
        oNode.attachEvent("on"+evt, oFunc);
    else
        oNode.addEventListener(evt, oFunc, true);

}
addEventHandler(window, "load", function() { setStyleForSize(); } );
addEventHandler(window, "resize", function() { setStyleForSize(); } );
</script>

Answer 1

试试这个而不是你的：

function addEventHandler(oNode, evt, oFunc) {
    if ( document.addEventListener ) {
        oNode.addEventListener(evt, oFunc, false);
        return oFunc;
    } else if ( document.attachEvent ) {
        var bound = function() {
            return fn.apply(oNode, arguments);
        };
        oNode.attachEvent("on" + evt, bound);
        return bound;
    }
}

注意：您无法指定哪个事件处理程序必须与typeof(window.event)一起使用，因此您的if语句不正确

请参阅 DEMO

Answer 2

screen.width永远不会更改，请改用window.innerWidth：

function setStyleForSize() {
    if (window.innerWidth <= 481) {
        document.body.className = "bodySmall";
    }

else {
        document.body.className = "bodyNormal";
    }

}

JS为size函数设置样式

2 个答案: