Как сбросить стиль, который изменился с помощью JavaScript - PullRequest
Новая
       11

Как сбросить стиль, который изменился с помощью JavaScript

0 голосов
/ 04 июля 2018

Я пытаюсь создать полноценную RWD-страницу, используя HTML5, CSS3 и JavaScript.

Я использовал @media в своем файле таблицы стилей CSS, чтобы установить 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 = "";
}

Но статья минимизируется при перемещении экрана в телефонах (например, прокрутка). Так что теперь пользователи телефона должны сначала прокрутить, а затем открыть боковое меню. Не могли бы вы помочь мне найти лучший путь? Можно ли вызвать скрипт, когда ширина экрана превышает определенную величину?

1 Ответ

0 голосов
/ 04 июля 2018

Мне кажется, в 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 SCRIPT УДИВИТЕЛЬНЫЙ. Спасибо всем.

...