Javascript change display CSS

Question

Im completely new to Javascript, this is what i want: Guy clicks on an element, so i trigger an onclick and i want to run a JS function, all clear so i need a JS function, what this function needs to do:

Check if the display of element #mobilemenu is block or none.
When it is block change it to none, when its none change it to block.

What i found so far was this:

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

But i am stuck on checking if it is currently block or none. I am kinda new to JS so maybe it is super easy (as i think) but i can't find a proper tutorial or some examples.

Thanks in advance!

Possible duplicate of [stackoverflow question][1] [1]: http://stackoverflow.com/questions/4866229/can-you-check-an-objects-css-display-with-javascript — Ganesh Salunkhe, Mar 03 '15 at 11:51

Anupam Basak · Answer 1 · 2015-03-03T11:56:34.237

0

Just add an 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";
}

Here is a Fiddle: http://jsfiddle.net/vaa9goLe/

edited Mar 03 '15 at 11:56

answered Mar 03 '15 at 11:49

Anupam Basak

1,503
11
13

Thanks man works properly, actually the same as im used to in PHP, thanks! – Chiel Mar 03 '15 at 11:57

score 0 · Answer 2 · answered Mar 03 '15 at 11:50

0

You can use an if/else statement to check whether the element is displayed, and then show or hide it accordingly:

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";
    }
}

answered Mar 03 '15 at 11:50

Olly Hodgson

15,076
3
40
60

Thanks man works properly, actually the same as im used to in PHP, thanks! – Chiel Mar 03 '15 at 11:57
@ArunprasanthKV At the start #mobilemenu is defined as display: none; but else it indeed wont work. – Chiel Mar 03 '15 at 11:59

score 0 · Answer 3 · answered Mar 03 '15 at 12:00

Also, you can use getComputedStyle in case your element doesn't have initial display value to ensure your function will always work.

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/

score 0 · Answer 4 · answered Mar 03 '15 at 12:03

0

This may help you

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

answered Mar 03 '15 at 12:03

Priyank

3,778
3
29
48

@Chiel shortest way :) – Priyank Mar 03 '15 at 12:03
where is the checking -if the display of element #mobilemenu is block or none ? – Md. Arafat Al Mahmud Mar 03 '15 at 12:10
@Md.ArafatAlMahmud i have used ternary operator contentId.style.display == "block" ? contentId.style.display = "none" : contentId.style.display = "block"; this statement check whether style is block or not – Priyank Mar 03 '15 at 12:12
@Md.ArafatAlMahmud or copy my code and run in your local you can understand :) – Priyank Mar 03 '15 at 12:13
@Md.ArafatAlMahmud look deep there is a condition inside that ,it is a conditional operator syntax like test ? expression1 : expression2 – Arunprasanth K V Mar 03 '15 at 12:14
inline, inherit etc. are also display properties – Md. Arafat Al Mahmud Mar 03 '15 at 12:17

score 0 · Answer 5 · answered Mar 03 '15 at 12:15

If the div had style value anything other than block or none , the following code should do nothing and preserve the original style value.

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

Javascript change display CSS

5 Answers5