如何重置使用javascript更改的样式

Question

我正在尝试使用 HTML5、CSS3 和 JavaScript 制作完整的 RWD 网页。

我在我的 CSS 样式表文件中使用了 @media 来设置 aside width:0;和隐藏的溢出，在小型设备中。我添加了一个调用 java 脚本以最小化 article 和最大化 aside 菜单的按钮，以及另一个用于最小化 aside 并返回 article 的按钮。

调用如下代码：

function openaside() {
    document.getElementById("article").style.width = "0";
    document.getElementById("aside").style.width = "100%";
    document.getElementById("showasidebtn").style.width = "0";
    document.getElementById("hideasidebtn").style.width = "25pX";
}
function closeaside() {
    document.getElementById("article").style.width = "100%";
    document.getElementById("aside").style.width = "0";
    document.getElementById("showasidebtn").style.width = "25px";
    document.getElementById("hideasidebtn").style.width = "0";    
}

我的页面可以正确响应屏幕大小，并且我的脚本运行良好。但是，当我使用这些脚本更改样式然后更改屏幕大小时，我的 article 和 aside 宽度不会动态更改，直到我刷新页面。

我添加了以下 JavaScript 代码以在调整屏幕大小时刷新页面：

window.addEventListener("resize", onresize);
function onresize(){
   location.reload(false)
}

---

感谢每一位我找到方法的人，而不是

function onresize(){
   location.reload(false)
}

我用：

function onresize(){
    document.getElementById("article").style.width = "";
    document.getElementById("aside").style.width = "";
    document.getElementById("showasidebtn").style.width = "";
    document.getElementById("hideasidebtn").style.width = "";
}

但是当屏幕在手机中移动（例如滚动）时，文章会最小化。所以现在手机用户应该先滚动然后打开侧边菜单。你能帮我找到更好的方法吗？当屏幕宽度超过一定数量时，有什么方法可以调用脚本？

Answer 1

我似乎在 java 脚本中我们没有针对屏幕大小的独立事件侦听器。但我意识到我们可以获取屏幕大小，所以我使用以下代码：

function onresize() {
    window.addEventListener("resize", onresize);
    var viewportwidth;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth
    }
    //then I checked size to reset if nesecery
    if (viewportwidth > 600) {
         document.getElementById("article").style.width = "";
         document.getElementById("aside").style.width = "";
         document.getElementById("showasidebtn").style.width = "";
         document.getElementById("hideasidebtn").style.width = "";
    }

Java 脚本非常棒。 谢谢大家。