根據div的class用js隱藏DOM元素

Question

我正在嘗試根據以下條件在 DOM 中添加一個新元素：“如果頁面覆蓋被隱藏”。

這是覆蓋結構（HTML）：

    <div id="mobile-start-container" class="fn-npnxnanbnsnfns01001000001" style="display: none;">
    <div class="mobile-start-overlay shown" role="dialog" aria-modal="true" aria-labelledby="mobile-start-title" data-reactid=".0">
        <div class="mobile-load-title-overlay" style="opacity:0;" data-reactid=".0.0">
            <div class="mobile-load-title" id="mobile-start-title" data-reactid=".0.0.0">FORMATION AU PROGRAMME PRIMAIRE</div>
        </div>
        <div data-reactid=".0.4">
            <div class="mobile-start-resume-text" data-reactid=".0.4.0"><button aria-label="Reprendre" tabindex="0" style="font-size:100%;border-radius:30px;" data-reactid=".0.4.0.0">Reprendre</button></div><button class="restart" aria-label="Redémarrer" tabindex="0" data-reactid=".0.4.1"><svg class="cs-icon" preserveAspectRatio="none" x="0px" y="0px" width="13px" height="15.75px" focusable="false" tabindex="-1" data-reactid=".0.4.1.0"><path fill="#FFFFFF" transform="scale(1, 1) translate(0, 0)" stroke="none" d=" M 10.95 8.75 Q 11 9 11 9.25 10.95 11.15 9.7 12.4 8.4 13.7 6.5 13.75 4.6 13.7 3.3 12.4 2.05 11.15 2 9.25 2.05 7.3 3.3 6.05 4.398828125 4.998828125 6 4.75 L 6 6.9 Q 6.05 7.75 6.85 7.35 L 11.35 4.3 Q 11.7 4.05 11.7 3.75 11.7 3.45 11.35 3.2 L 6.85 0.15 Q 6.05 -0.3 6 0.6 L 6 2.75 Q 3.4517578125 3.001171875 1.8 4.75 0.05 6.6 0 9.25 0.05 12 1.9 13.85 3.75 15.65 6.5 15.75 9.25 15.65 11.1 13.85 12.95 12 13 9.25 13 9 13 8.75 L 10.95 8.75 Z" data-reactid=".0.4.1.0.0"></path></svg><div class="restart-text" style="color:white;display:inline-block;padding-left:1em;transform:translateY(-3px);font-size:13px;" data-reactid=".0.4.1.1">Redémarrer</div></button></div>
        <div
            class="mobile-start-course-title" style="font-size: 20.28px;" data-reactid=".0.5">FORMATION AU PROGRAMME PRIMAIRE</div>
</div>
</div>

這是我的腳本 (JAVASCRIPT)：

document.body.onload = addElement;

    function addElement() {
        var overlayContainer = document.getElementById("mobile-start-container");
        console.log(overlayContainer);
        var divOverlay = document.getElementsByClassName("mobile-start-overlay")[0];
        console.log(divOverlay);

        if (divOverlay.classList.contains('shown')) {
            console.log("overlay is shown so don't display the button");

        } else {

            // Create new Button element
            var newButton = document.createElement("button");
            // add class to the new Button
            newButton.className = "question-btn";
            // add SVG tag inside Button
            var newSvg = document.createElement("svg");
            // add class to svg tag
            newSvg.className = "svg-icon";
            // fill svg element with my shape
            var svgContent = document.createElementNS("http://www.w3.org/2000/svg", 'path');
            svgContent.setAttribute("d", "M 0 0 L 10 10");
            svgContent.style.stroke = "#fff";
            svgContent.style.strokeWidth = "1px";
            newSvg.appendChild(svgContent);
            // add svg node to created button
            newButton.appendChild(newSvg);
            // add new button somewhere else in DOM
            var currentDiv = document.getElementById('nav-controls');
            document.body.insertBefore(newButton, currentDiv);

            console.log(newButton);

        }
    }

我的問題是條件被忽略了。 無論疊加層是“顯示”還是“隱藏”，按鈕都會在 100% 的時間內顯示。 （也沒有顯示 svg 標簽內的路徑，但這是另一回事）。

Answer 1

您可以在 css 顯示器上試試這個：無；