Javascript更改顯示CSS

我完全陌生的Javascript，這就是我想要的： Guy點擊一個元素，所以我觸發一個onclick，我想運行一個JS函數，所有清除，所以我需要一個JS函數，什麼此功能需要做：Javascript更改顯示CSS

檢查元素#mobilemenu的顯示是否爲塊或無。
當它是塊更改爲無，當它沒有改變它阻止。

我發現到目前爲止是這樣的：

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

但我被困在檢查，如果它是目前阻礙或無。我對JS很有新意，所以也許這很容易（就像我想的那樣），但我找不到合適的教程或一些例子。

在此先感謝！

來源

2015-03-03 Chiel

如果使用的條件 – 2015-03-03 11:48:15

可能的複製[計算器問題] [1] [1]：http://stackoverflow.com/questions/4866229/can-you- check-an-objects-css-display-with-javascript – 2015-03-03 11:51:29

只需添加一個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/

來源

2015-03-03 11:49:46

感謝man正常工作，實際上和我在PHP中使用的一樣，謝謝！ – Chiel 2015-03-03 11:57:24

高興地幫助你.. :) – 2015-03-03 11:57:42

您可以使用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"; 
    } 
}

來源

2015-03-03 11:50:36

感謝人工作正常，實際上就像我在PHP中使用一樣，謝謝！ – Chiel 2015-03-03 11:57:21

@ArunprasanthKV開始#mobilemenu被定義爲display：none;但否則它確實不會工作。 – Chiel 2015-03-03 11:59:21

而且，如果元素沒有初始值display，則可以使用getComputedStyle以確保您的功能始終有效。

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/

來源

2015-03-03 12:00:31

這可能會幫助你

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

來源

2015-03-03 12:03:06 Priyank

@Chiel最短的路:) – Priyank 2015-03-03 12:03:50

檢查的地方如果元素#mobilemenu的顯示是block還是none？ – 2015-03-03 12:10:49

@ Md.ArafatAlMahmud我已經使用三元運算符contentId.style.display ==「塊」？ contentId.style.display =「none」： contentId.style。display =「block」;這種說法檢查風格是否是塊還是不 – Priyank 2015-03-03 12:12:35

如果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 ; 
}

來源

2015-03-03 12:15:12

Javascript更改顯示CSS

回答

相關問題