how to reset style that changed by using javascript

Question

I am trying to make a full RWD webpage using HTML5, CSS3, and JavaScript.

I have used @media in my CSS stylesheet file to set aside width:0; and hidden overflow, in small devices. I added a button that calls java scripts to minimize article and maximize aside menu, and another button to minimize aside and return article.

The following code is called:

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";    
}

My page correctly responds to screen size and my scripts work fine. However when I use these scripts to change style and then change screen size, my article and aside width do not dynamically change until I refresh the page.

I have added the following JavaScript code to refresh page when screen is resized:

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

Thanks every one I Find a way, instead of

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

I use:

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

But article minimize when the screen is moved in phones (e.g. scrolling). So now phone users should first scroll then open side menu. Could you help me find a better way? Is there any way to call a script when screen width exceed a certain amount?

Possible duplicate of [How to reset a CSS attribute that's been changed using JavaScript?](https://stackoverflow.com/questions/22673097/how-to-reset-a-css-attribute-thats-been-changed-using-javascript) — Mike, Jul 04 '18 at 17:26
Drop the onresize listener and try `.width = "calc(100%)"` etc. That will recalculate 100% when the screen size changes. — Teemu, Jul 04 '18 at 17:26
I couldn't find something like window.addEventListener to call a function when screen size reach certain amount. — Farshid Ahmadi, Jul 04 '18 at 18:41

Farshid Ahmadi · Accepted Answer · 2018-07-04T19:26:35.660

I seems in java script we don't have independent event listener for screen size. But I realized we can get screen size, so I use following code:

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 SCRIPT IS AMAZING. Thanks all.

how to reset style that changed by using javascript

1 Answers1