0

После перезагрузки страницы при нажатии на элемент не учитывается первое нажатие

// Open settings menu.
var settingsButton = document.getElementsByClassName('settings-button')[0];
var settingsBlock = document.getElementsByClassName('settings')[0];

function openSettingsBlock(event) {
    console.log('ok');
    console.log(settingsBlock.style.left);

    if (settingsBlock.style.left == '-400px') {
        settingsBlock.style.left = '0';
    } else {
        settingsBlock.style.left = '-400px';
    }
}

settingsButton.addEventListener('click', openSettingsBlock);
.settings-button {
    position: absolute;
    background-image: url("/static/img/settings.svg");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 35px;
    width: 35px;
    z-index: 3;
}

.settings {
    background-color: rgba(0, 0, 11, 0.85);
    box-shadow: 0 0 20px black;
    color: white;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: -400px;
    width: 350px;
    z-index: 2;
    transition: left 1s ease-out 0.1s;
}
<button class="settings-button">Btn</button>
<button class="settings">Settings</button>

Как понимаю, скрипт не имеет доступа к стилям, по какой-то причине. На первое нажатие в консоль выводится пустая строка, вместо значения settingsBlock.style.left. Последующие нажатия отрабатываются корректно. Подскажите, пожалуйста, как исправить

0

1 ответ 1

3

Свойство style содержит лишь тот стиль, который указан в атрибуте элемента, без учёта каскада CSS.

Для того, чтобы получить текущее используемое значение свойства, используется метод window.getComputedStyle, описанный в стандарте DOM Level 2.

Его синтаксис таков:

getComputedStyle(element[, pseudo])
  • element Элемент, значения для которого нужно получить
  • pseudo Указывается, если нужен стиль псевдо-элемента, например ::before. Пустая строка или отсутствие аргумента означают сам элемент.

Поддерживается всеми браузерами, кроме IE8-.

В IE8- нет getComputedStyle, но у элементов есть свойство currentStyle, которое возвращает вычисленное (computed) значение: уже с учётом CSS-каскада.

Чтобы код работал и в старых и новых браузерах, обычно пишут кросс-браузерный код, наподобие такого:

function getStyle(elem) {
  return window.getComputedStyle ? getComputedStyle(elem, "") : elem.currentStyle;
}

Если вы откроете такой документ в IE8-, то размеры будут в процентах, а в современных браузерах – в пикселях.

// Open settings menu.
var settingsButton = document.getElementsByClassName('settings-button')[0];
var settingsBlock = document.getElementsByClassName('settings')[0];

function getStyle(elem) {
  return window.getComputedStyle ? getComputedStyle(elem) : elem.currentStyle;
}

function openSettingsBlock(event) {
    console.log('ok');
    var style = getStyle(settingsBlock);
    console.log(style.left);

    if (style.left == '-400px') {
        settingsBlock.style.left = '0';
    } else {
        settingsBlock.style.left = '-400px';
    }
}

settingsButton.addEventListener('click', openSettingsBlock);
.settings-button {
    position: absolute;
    background-image: url("/static/img/settings.svg");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 35px;
    width: 35px;
    z-index: 3;
}

.settings {
    background-color: rgba(0, 0, 11, 0.85);
    box-shadow: 0 0 20px black;
    color: white;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: -400px;
    width: 350px;
    z-index: 2;
    transition: left 1s ease-out 0.1s;
}
<button class="settings-button">Btn</button>
<button class="settings">Settings</button>

3
  • метод getStyle() это же полифилл?
    – while1pass
    24 ноя 2016 в 19:42
  • @while1pass что такое полифилл? 25 ноя 2016 в 12:19
  • learn.javascript.ru/dom-polyfill, функции, которые добавляют совместимости с старыми браузерами
    – while1pass
    25 ноя 2016 в 13:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.