How do I compare a CSS variable in javascript?

Question

so I want to check if a CSS variable is 0px, and then to console.log a message saying "Make Big". This is the if statement I have tried using:

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');
    }
});

And this is the CSS variable:

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

This is the 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>

This is the ouput in the console:

https://prnt.sc/x45osr

Any help would be appreciated, thanks.

EDIT: Thanks for all your help.

What does getComputedStyle(root)?

H. Pauwelyn
– H. Pauwelyn

2021-01-18 09:49:32 +00:00
Commented Jan 18, 2021 at 9:49 — H. Pauwelyn
– H. Pauwelyn, Commented Jan 18, 2021 at 9:49

DBS · Accepted Answer · 2021-01-18 09:52:16Z

Your code is returning 0px (There is a space before the 0)

Example comparing with a space:

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>

You can either expect that in the comparison, or .trim() the string to remove extra space at the start/end before doing the comparison (Trimming is likely more reliable)

Trimming example:

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>

Afsar · Accepted Answer · 2021-01-18 09:46:26Z

0

Trim the value you are getting extra space

change line

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

to

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

answered Jan 18, 2021 at 9:46

Afsar

3,1242 gold badges27 silver badges35 bronze badges

Collectives™ on Stack Overflow

How do I compare a CSS variable in javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related