Change display style property of a div using Javascript
Question
I'm trying to display a div onclick of a btn by changing the style property of the div. But I can't read the display property of that div. I read somewhere that the code doesn't work because the script tries to get the value before the div has loaded so the script should be triggered after window.onload. How do I make the script work after window has loaded but only when the button has been clicked ?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#hidden-div{
display: none;
}
</style>
<script type="text/javascript">
function showMe() {
var foo = document.getElementById('hidden-div');
alert(foo.style.display); //this gives a blank alert
if(foo.style.display == ''){
foo.style.display = 'block';
}
else {
foo.style.display == 'none';
}
}
</script>
</head>
<body>
<input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes</input><br>
<div id="hidden-div">
<input type="checkbox" id="check-1"> Check 1</input>
<br>
<input type="checkbox" id="check-2"> Check 2</input>
<br>
<input type="checkbox" id="check-3"> Check 3</input>
</div>
</body>
</html>
2 answers
solution1
2 ACCPTED 2016-09-02 19:47:17
Something to note: == is for comparison, = is for assignment. Also, there are no closing input tags. Here's the finished snippet:
function showMe() { var foo = document.getElementById('hidden-div'); if(foo.style.display == '' || foo.style.display == 'none'){ foo.style.display = 'block'; } else { foo.style.display = 'none'; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes</input><br> <div id="hidden-div" style="display:none;"> <input type="checkbox" id="check-1"> Check 1 <br> <input type="checkbox" id="check-2"> Check 2 <br> <input type="checkbox" id="check-3"> Check 3 </div> </body> </html>
I also changed some logic. If the display is none, and the button is clicked, toggle the visibility. If display is not none, then make it none.
The thing is element.style.<style> is only accessible if the style is set inline.
solution2
1 2016-09-02 19:58:36
foo.style.display only works for styling that has been set inline, not for stylehseets or blocks. For that you would use getComputedStyle :
function showMe() { var elem = document.getElementById("hidden-div"); var foo = window.getComputedStyle(elem, null); if (foo.getPropertyValue("display") == 'none') { elem.style.display = 'block'; } else { elem.style.display = 'none'; } }
#hidden-div { display: none; }
<input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes <br> <div id="hidden-div"> <input type="checkbox" id="check-1"> Check 1 <br> <input type="checkbox" id="check-2"> Check 2 <br> <input type="checkbox" id="check-3"> Check 3 </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.