Блог

Главная - Вопросы по программированию - Как мне сравнить переменную CSS в javascript?

Как мне сравнить переменную CSS в javascript?

#javascript #html #css

#javascript #HTML #css

Вопрос:

итак, я хочу проверить, равна ли переменная CSS 0px, а затем к console.log сообщению с надписью «Make Big». Это оператор if, который я пытался использовать:

 const root = document.documentElement
const toggleNavButton = document.querySelector('.nav-dropdown');

toggleNavButton.addEventListener('click', () => {
    console.log(getComputedStyle(root).getPropertyValue('--mobile-navbar-height'))
    if (getComputedStyle(root).getPropertyValue('--mobile-navbar-height') === '0px') {
        console.log('Make big');
    }
});

И это переменная CSS:

 :root {
    --mobile-navbar-height: 0px;
}

Это HTML:

 <html lang="en">
    <head>
        <title>Frontend - Sign Up</title>
        <link rel="stylesheet" href="../styles/styles.css">
        <script defer src="../scripts/UI_Manager.js"></script>
    </head>

    <body>
        <header>
            <nav class="top-nav">
                <ul class="nav-link-container">
                    <li class="nav-item nav-all">TITLE</li>
                    <li class="nav-item nav-full">ITEM 1</li>
                    <li class="nav-item nav-full">ITEM 2</li>
                    <li class="nav-item nav-full">ITEM 3</li>
                    <li class="nav-item nav-dropdown">
                        <span>🍔</span>
                    </li>
                </ul>
            </nav>
        </header>
    </body>
</html>

Это вывод в консоли:

https://prnt.sc/x45osr

Буду признателен за любую помощь, спасибо.

РЕДАКТИРОВАТЬ: Спасибо за всю вашу помощь.

Комментарии:

1. Что делает getComputedStyle(root) ?

Ответ №1:

Ваш код возвращается 0px (перед 0 стоит пробел)

Пример сравнения с пробелом:

 const root = document.documentElement
const toggleNavButton = document.querySelector('.nav-dropdown');

toggleNavButton.addEventListener('click', () => {
  var style = getComputedStyle(root).getPropertyValue('--mobile-navbar-height')
  console.log(style)
  if (style === ' 0px') {
    console.log('Make big');
  }
}); 
 :root {
  --mobile-navbar-height: 0px;
} 
 <button type='button' class='nav-dropdown'>Dropdown example</button>

Вы можете либо ожидать, что при сравнении или .trim() в строке будет удалено дополнительное пространство в начале / конце перед выполнением сравнения (обрезка, вероятно, более надежна)

Пример обрезки:

 const root = document.documentElement
const toggleNavButton = document.querySelector('.nav-dropdown');

toggleNavButton.addEventListener('click', () => {
  var style = getComputedStyle(root).getPropertyValue('--mobile-navbar-height').trim()
  console.log(style)
  if (style === '0px') {
    console.log('Make big');
  }
}); 
 :root {
  --mobile-navbar-height: 0px;
} 
 <button type='button' class='nav-dropdown'>Dropdown example</button>

Ответ №2:

Обрезайте значение, при котором вы получаете дополнительное пространство

изменить строку

 getComputedStyle(root).getPropertyValue('--mobile-navbar-height') === '0px'

Для

 getComputedStyle(root).getPropertyValue('--mobile-navbar-height').trim() === '0px'
Метки: