Javascript 为我使用 css 设置样式的文档对象显示空样式属性

Question

我有一个简短的问题。如果有人能帮我解决这个问题，我会很高兴。

我正在尝试创建一个导航栏，然后我有以下 CSS 代码，

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

在上面的代码中，.sliding-menu class 给了一个 div 里面有内容。

然而，当我使用 Javascript 并键入以下代码时，

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

console returns 给我一个空字符串。有谁知道原因吗？谢谢

附加信息：
如果有人需要参考，我会在下面提供整个代码。

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

我试了大约三个小时，没找到问题所在。如果有人可以请帮助。非常感谢。

Answer 1

这是因为 element.style returns 元素的内联 CSS 样式，而不是基于 CSS 样式表的计算样式。

要获取计算样式，请使用 window.getComputedStyle(element)。

更多信息在这里：

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
why javascript this.style[property] return an empty string?

Answer 2

如果要访问元素的特定样式，应使用 getComputedStyle() 方法。

我建议您阅读它的工作原理https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp

Javascript 为我使用 css 设置样式的文档对象显示空样式属性

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

html

javascript

css

dom

dom-events

Javascript 为我使用 css 设置样式的文档对象显示空样式 属性

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

html

javascript

css

dom

dom-events

Javascript 为我使用 css 设置样式的文档对象显示空样式属性