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

【问题标题】：Javascript shows empty style property for document objects that I have styled using the cssJavascript 显示我使用 css 设置样式的文档对象的空样式属性
【发布时间】：2021-08-27 00:58:04
【问题描述】：

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

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

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

在上面的代码中，.sliding-menu 类被赋予了一个包含内容的 div。

但是，当我使用 Javascript 并输入以下代码时，

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

控制台向我返回一个空字符串。有人知道原因吗？谢谢。

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

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

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

【问题讨论】：

这能回答你的问题吗？ How to get value translateX by javascript

标签： javascript html css dom dom-events

【解决方案1】：

如果你想访问某个元素的某种样式，你应该使用 getComputedStyle() 方法。

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

【讨论】：

感谢您的回复。现在我明白了。我真正想做的是使用javascript将这个设置翻译（100％）改回翻译（0）。我阅读了文档，它说我们不能用 computedStyle 来做，因为 computedStyle 是只读的。那么如果无法使用 element.style 访问属性，我该如何实际更改属性呢？
element.style 将允许您更改它，但您不能在控制台上记录它。

【解决方案2】：

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

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

更多信息在这里：

【讨论】：

感谢您的回复。现在我明白了。我真正想做的是使用javascript将这个设置翻译（100％）改回翻译（0）。我阅读了文档，它说我们不能用 computedStyle 来做，因为 computedStyle 是只读的。那么如果无法使用 element.style 访问属性，我该如何实际更改属性呢？