After reloading the page when you click on the item does not take into account the first click

// 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>

As I understand, the script does not have access to styles, for some reason. The first click on the console displays an empty line, instead of the value of settingsBlock.style.left. Subsequent presses are processed correctly. Please tell me how to fix

    1 answer 1

    The style property contains only the style specified in the element attribute, not taking into account the CSS cascade.

    In order to get the current property value used, the window.getComputedStyle method described in the DOM Level 2 standard is used.

    Its syntax is:

     getComputedStyle(element[, pseudo])
    • element The element for which you want to get
    • pseudo Specified if a pseudo-element style is needed, for example ::before . An empty string or no argument means the element itself.

    Supported by all browsers except IE8-.

    In IE8, there is no getComputedStyle , but the elements have the currentStyle property, which returns the computed value: already taking into account the CSS cascade.

    In order for the code to work in both old and new browsers, they usually write cross-browser code like this:

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

    If you open such a document in IE8-, the sizes will be in percent, and in modern browsers - in pixels.

     // 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>

    • getStyle method () is it a polyfill? - while1pass 7:42
    • @ while1pass what is a полифилл ? - Anton Shchyrov
    • learn.javascript.ru/dom-polyfill , features that add compatibility with older browsers - while1pass