Javascript更改顯示CSS

Question

我是全新的Javascript，這就是我想要的：Guy點擊一個元素，所以我觸發一個onclick ，我想運行一個JS函數，所有清楚所以我需要一個JS函數，這個函數需要做什么：

• 檢查元素#mobilemenu的顯示#mobilemenu為block或none。
• 當它是塊時將其更改為無，當它沒有更改為阻止時。

到目前為止我發現的是：

function Change(){
document.getElementById("mobilemenu").style.display = "block"; }

但我堅持檢查它是否是當前阻止或沒有。 我是JS的新手，所以也許它非常容易（我認為），但我找不到合適的教程或一些例子。

提前致謝！

Answer 1

只需添加一個if-else 。

function Change(){
    var displayVal = document.getElementById("mobilemenu").style.display;

    if (displayVal == "block")
        document.getElementById("mobilemenu").style.display = "none";
    else if (displayVal == "none")
        document.getElementById("mobilemenu").style.display = "block";
}

這是一個小提琴： http ： //jsfiddle.net/vaa9goLe/

Answer 2

您可以使用if / else語句檢查元素是否顯示，然后相應地顯示或隱藏它：

function Change() {
    /* Put the mobilemenu into a variable */
    var mobilemenu = document.getElementById("mobilemenu");

    /* Check the display property of the element's style object */
    if (mobilemenu.style.display !== "block") {
        /* The element isn't display: block; so show it */
        mobilemenu.style.display = "block"; 
    } else {
        /* The element is display: block; so hide it */
        mobilemenu.style.display = "none";
    }
}

Answer 3

此外，您可以使用getComputedStyle ，以防您的元素沒有初始display值，以確保您的函數始終有效。

var element = document.getElementById('btn');

element.onclick = function() { 
    var mydiv = document.getElementById('mydiv'),
        isVisible = (mydiv.currentStyle || window.getComputedStyle(mydiv, '')).display == 'block'; 
    if (isVisible){
        mydiv.style.display = 'none';
    } else {
        mydiv.style.display = 'block';
    }
};

的jsfiddle：

http://jsfiddle.net/ykypcmt2/

Answer 4

這可能對你有所幫助

<div id="mobilemenu" style="display:block"></div>
<script type="text/javascript">
function Change(){
var contentId = document.getElementById("mobilemenu");
contentId.style.display == "block" ? contentId.style.display = "none" : 
contentId.style.display = "block";
}
</script>

Answer 5

如果div的樣式值不是block或none ，則以下代碼不應執行任何操作並保留原始樣式值。

function Change(){

        document.getElementById("mobilemenu").style.display = ( document.getElementById("mobilemenu").style.display === "block" ) ? "none" :  ( document.getElementById("mobilemenu").style.display === "none" ) ? "block" : document.getElementById("mobilemenu").style.display ;
}