Javascript check css whether div display

Question

Right now, i have a div and i did an inline style, display:none. When the user click a button, it will call a javascript function and change the div display to according value. However, how can i do such check as they kept returning display:none even when in actual, display is block. Here is my javascript code

function unhideDiv(){
var divDOC=document.querySelector('divContent');
var result = document.getComputedStyle(divDOC, '').display;
if(result=='none'){
divDOC.style.display="block";
}
else
{
divDOC.style.display="none";
}

}

Here is my html code

    <div id="divContent" style="display:none;" >
    </div>
<button onclick="unhideDiv()">Click This </button>

Your help will be much appreciated. Thanks in advance!

Just use jQuery's .toggle(). If you want to do this yourself, use a variable to store the state. In your function, switch the variable, then set the style based on its new value. — user5734311
– user5734311, Commented Feb 2, 2017 at 1:12
You should open your browser console to check for errors. Also querySelector('divContent') should be querySelector('#divContent') but since you have jQuery tagged in this question why not just use toggle()...? — NewToJS
– NewToJS, Commented Feb 2, 2017 at 1:12
If you set the Element.style.display to what you want to begin with, you won't have to get a computed style. Or think 0 and 1. — StackSlave
– StackSlave, Commented Feb 2, 2017 at 1:13
@PHPglue is there anyway that i can solve this? By default, i want div to be hidden. Upon clicking the button, it will set display as block. — QCcccc
– QCcccc, Commented Feb 2, 2017 at 1:18
@QCcccc working with window.getComputedStyle() rather than document.getComputedStyle() jsfiddle.net/r4t1b7ub — NewToJS
– NewToJS, Commented Feb 2, 2017 at 1:25

Michael Coker · Accepted Answer · 2017-02-02 01:15:39Z

1

It's a lot easier to give the element a class that will hide it, then just toggle the class.

.hide {
  display: none;
}

<button onclick="toggleHide()">Click This</button>
<div id="divContent" class="hide">div</div>

<script>
  function toggleHide() {
    document.getElementById('divContent').classList.toggle('hide');
  }
</script>

answered Feb 2, 2017 at 1:15

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Davis · Accepted Answer · 2017-02-02 01:14:39Z

1

Make sure you're targeting the correct element with your querySelector method:

var divDOC = document.querySelector("#divContent");

Also, the command to get the computedStyle is window.getComputedStyle()

So your code would be something like this:

function unhideDiv(){
    var divDOC=document.querySelector('#divContent');
    var result = window.getComputedStyle(divDOC, '').display;
    if(result=='none'){
        divDOC.style.display="block";
    }
    else
    {
        divDOC.style.display="none";
    }
}

answered Feb 2, 2017 at 1:14

Matt Davis

4701 gold badge5 silver badges16 bronze badges

1 Comment

Matt Davis Over a year ago

You may also wish to add some content inside your div, so that you can see when it is visible and invisible. <div id="divContent" style="display:none;" ><p>Visible</p></div>

StackSlave · Accepted Answer · 2017-02-02 01:55:16Z

I like this solution:

// external.js
var doc, E; // reuse on other loads
addEventListener('load', function(){
  
doc = document;
E = function(id){ // super easy
 return doc.getElementById(id);
}
var bS = E('box').style, d = 1;
E('butt').addEventListener('click', function(){
  if(d){
    bS.display = 'none'; d = 0;
  }
  else{
    bS.display = 'block'; d = 1;
  }
});

});

/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:980px; margin:0 auto;
}
#box{
  width:100px; height:100px; background:orange
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='box'>test box</div>
    <input type='button' id='butt' value='change display' />
  </div>
</body>
</html>

Collectives™ on Stack Overflow

Javascript check css whether div display

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related