document.querySelector("#name").style 返回具有空值的字典 [重复]答案

【问题标题】：document.querySelector("#name").style returns dictionary with null value [duplicate]document.querySelector("#name").style 返回具有空值的字典 [重复]
【发布时间】：2021-08-15 21:58:23
【问题描述】：

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>About Us</title>
        <link rel="stylesheet" href="css/design.css">
        <script src="js/script.js"></script>
    </head>
    <body>
        <div id="static">
            <input type="image" src="media/tag.png" id="tag"/>
            <div id="mobile-nav-bar">
                <button value="overview" class="bar-element">Overview</button><br><br><br>
                <button value="what_we_do" class="bar-element">What We Do</button><br><br><br>
                <button value="innovations" class="bar-element">Innovations</button><br><br><br>
                <button value="why_choose_us" class="bar-element">Why Choose Us</button><br><br><br>
                <button value="team" class="bar-element">The Team</button><br><br><br>
                <button value="contact" class="bar-element">Contact Us</button>
            </div>

        </div>
    </div>
</body>

CSS：

#mobile-nav-bar {
    width: 20vw;
    height: 50vh;
    position: relative;
    top: 15vh;
    left: 40vw;
    display: block;
    animation-name: navbarOut;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes navbarOut {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

JS：

document.addEventListener("DOMContentLoaded", () => {

    const bar = document.querySelector("#mobile-nav-bar");
    const content = document.querySelector("#content");


    document.querySelector("#tag").onclick = () => {
        console.log(bar.style);
    }
});

我正在尝试访问 mobile-nav-bar 的样式属性，但每次返回的字典都有空值。我正在尝试使用 display 的 style 属性，但由于它是空的，所以无法这样做。而我已经定义了 CSS 属性。我是新手，请帮忙。

【问题讨论】：

标签： javascript html css dom

【解决方案1】：

document.addEventListener("DOMContentLoaded", () => {

    const bar = document.querySelector("#mobile-nav-bar");
    const content = document.querySelector("#content");

    document.querySelector("#tag").onclick = () => {
        console.log(window.getComputedStyle(bar).getPropertyValue("display"));
        // prints "block"
    }
});

【讨论】：

【解决方案2】：

element.style 仅适用于内联样式，而导航栏的样式在别处定义（单独的文件/样式标签）

相反，您应该使用 getComputedStyle。

document.addEventListener("DOMContentLoaded", () => {

    const bar = document.querySelector("#mobile-nav-bar");
    const content = document.querySelector("#content");


    document.querySelector("#tag").onclick = () => {
        console.log(window.getComputedStyle(bar).getPropertyValue("display"));
        // prints "block"
    }
});

更多信息：Get a CSS value with JavaScript

【讨论】：