CODEWITHSUNDEEP
javascripthtmlcssdomdom-events
Heshan Kumarasinghe
Heshan Kumarasinghe

Reputation: 83

Javascript shows empty style property for document objects that I have styled using the css

I have a quick question. Would be glad if anyone can help me out with this one.

I am trying to create a navigation bar and then I have the following CSS code,

header .navbar .container .sliding-menu {
    transform: translateX(100%);
}

In the above code, the .sliding-menu class given to a div that has content in it.

However when I use the Javascript and type the following code,

const slidingMenu = document.querySelector('header .navbar .container .sliding-menu');
console.log(slidingMenu.style.transform);

console returns an empty string to me. Does anyone know the reason? Thanks.

Adittional Info:
I will provide the whole code below if anyone wants it for reference.

HTML

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>Computia | Computers & Related Accessories | Best Price in Sri Lanka</title>
</head>

<body>
    <header>
        <nav class="navbar">
            <div class="container">
                <h1 class="logo">Computia</h1>
                <div class="sliding-menu">
                    <h2>Navigate</h2>
                    <ul>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Journal</a></li>
                        <li><a href="#">Shopping Bag</a></li>
                    </ul>
                    <h2>Account</h2>
                    <ul>
                        <li><a href="#">Sign In / Register</a></li>
                        <li><a href="#">Wishlist</a></li>
                        <li><a href="#">Returns</a></li>
                        <li><a href="#">Gift Certificates</a></li>
                        <select name="currency" id="currency">
                            <option value="LKR">LKR</option>
                            <option value="USD">USD</option>
                            <option value="AUD">GBP</option>
                        </select>
                    </ul>
                </div>
                <div class="hamburger">
                    <div class="line-1"></div>
                    <div class="line-2"></div>
                    <div class="line-3"></div>
                </div>
            </div>
        </nav>
    </header>

    <script src="app.js"></script>
</body>

</html>

CSS

/* -------------------------- */
/* --------CSS Reset-------- */
/* ------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ----------------------------- */
/* --------Main Styling--------- */
/* ---------------------------- */

:root {
    --primary-color: #118ab2;
}

html, body {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    overflow-x: hidden;
}

h1 {
    font-family: 'Roboto', sans-serif;
    letter-spacing: 3px;
    font-size: 2rem;
    border-bottom: 1px solid black;
    display: block;
    padding-bottom: 0.2em;
}

a, p {
    font-size: 1.5rem;
}

a {
    text-decoration: none;
    color: black;
}

ul {
    list-style: none;
}

/* ------------------------------------ */
/* --------Reusable Components--------- */
/* ------------------------------------ */

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

/* ------------------------ */
/* ---------Navbar-------- */
/* ------------------------*/

header .navbar .container {
    position: relative;
}

header .navbar .container h1,
header .navbar .container .sliding-menu
{
    background-color: var(--primary-color);
}

header .navbar .container .hamburger {
    background-color: chartreuse;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

header .navbar .container .sliding-menu {
    transform: translateX(100%);
}

header .navbar .container .hamburger div {
    height: 3px;
    margin: 4.5px;
    width: 30px;
    background-color: rgb(201, 190, 190);
    border-radius: 100px;
}

/* Navbar-classLists */

/* .hamburger-toggled .line-1 {
    transform: rotate(45deg);
}

.hamburger-toggled .line-2 {
    opacity: 0
}

.hamburger-toggled .line-3 {
    transform: rotate(-45deg);
} */

Javascript

const slidingMenu = document.querySelector('header .navbar .container .sliding-menu');
console.log(slidingMenu.style.transform);

I tried for around three hours and could not find the issue. Please help if someone can. Thank you so much.

Upvotes: 0

Views: 858

Answers (2)

Saif Eddine
Saif Eddine

Reputation: 11

If you want to access a certain style of an element, you should use getComputedStyle() method.

I recommend you to read how it works https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp

Upvotes: 1

Justice Erolin
Justice Erolin

Reputation: 2879

This is because element.style returns the inline CSS style for the element, and not the computed style based on CSS stylesheets.

To get the computed style, use window.getComputedStyle(element).

More information here:

Upvotes: 1

Related Questions