javascript style.display only work with css inline

Question

I do not understand this behavior.

If I set style "display:none" inline works properly when I click on ChangeDiv1 button.

If I set style "display:none" in header tag when I click on ChangeDiv2 button document.getElementById("conten2").style.display is empty.

If I do not set style "display:none" when I click on ChangeDiv3 button document.getElementById("conten3").style.display is empty.

How can I solve this?

  function cambiar1() {
    var miElemento1 = document.getElementById("conten1").style.display;
    if (miElemento1 == "block") document.getElementById("conten1").style.display = "none";
    if (miElemento1 == "none") document.getElementById("conten1").style.display = "block";
    document.getElementById('estadoconten1').innerHTML = 'State Div1:' + document.getElementById("conten1").style.display;
  }
 
  function cambiar2() {
    var miElemento2 = document.getElementById("conten2").style.display;
    if (miElemento2 == "block") document.getElementById("conten2").style.display = "none";
    if (miElemento2 == "none") document.getElementById("conten2").style.display = "block";
    document.getElementById('estadoconten2').innerHTML = 'State Div2:' + document.getElementById("conten2").style.display;
  }
 
   function cambiar3() {
    var miElemento3 = document.getElementById("conten3").style.display;
    if (miElemento3 == "block") document.getElementById("conten3").style.display = "none";
    if (miElemento3 == "none") document.getElementById("conten3").style.display = "block";
    document.getElementById('estadoconten3').innerHTML = 'State Div3:' + document.getElementById("conten3").style.display;
  }

#estadoconten1 {border:solid 1px red}
#conten2 {display:none; border:solid 1px green}
#conten3 {border:solid 1px blue}

<h2>
MODIFY "LOAD TYPE" AT JAVASCRIPT MENU AND SET "IN HEAD" OPTION
</h2>
<button type="button" onclick="cambiar1()">ChangeDiv1</button>
<button type="button" onclick="cambiar2()">ChangeDiv2</button>
<button type="button" onclick="cambiar3()">ChangeDiv3</button>
<div id='estadoconten1'></div>
<div id='estadoconten2'></div>
<div id='estadoconten3'></div>
<br>
<div id='conten1' style='display:none'>
I am Div 1
</div>
<br>
<div id='conten2'>
I am Div 2
</div>
<br>
<div id='conten3'>
I am Div 3
</div>

Example jsfiddle

The code related to your question must be **in** your question, not just linked. Use Stack Snippets (the `<>` toolbar button) to create a runnable demo like jsFiddle **on-site**. — T.J. Crowder, Aug 25 '16 at 16:37
From [MDN HTMLElement.style](https://developer.mozilla.org/docs/Web/API/HTMLElement/style) "The HTMLElement.style property returns a CSSStyleDeclaration object that represents only the element's inline style attribute, ignoring any applied style rules." — Stephen P, Aug 26 '16 at 23:22

score 0 · Answer 1 · answered Aug 25 '16 at 16:45

0

You check if an elememt has display: block or none. However there are many others like initial, inline,outline ... . thats why your js doesnt work. Explicitly set it to your css:

#conten1,#conten2,#conten3{
display:block;
}

Or change your js

if(element.style.display=="none"){
//element is hidden
//display
}else{
//elememt is not hidden
//hide
}

answered Aug 25 '16 at 16:45

Jonas Wilms

132,000
20
149
151

Hi, Please review the Example jsfiddle, because your answer is tried on DIV2. DIV2 has set "display:none" in CSS and then show the current state with "document.getElementById('estadoconten1').innerHTML = 'State Div1:' + document.getElementById("conten1").style.display" – D. Ortega Aug 25 '16 at 22:07
@D. Ortega: did you tried the js solution?? – Jonas Wilms Aug 26 '16 at 05:15
the js solution is NOT working because "element.style.display" is "" instead of "block, none, initial, inline,outline ..." – D. Ortega Aug 26 '16 at 22:05

score 0 · Answer 2 · answered Aug 26 '16 at 22:30

You can toggle anything other than "none" to "none". You can toggle "none" to "block".

function cambiar(idx) {
  var el = document.getElementById("conten" + idx);
  var miElemento = el.style.display;
  if (miElemento === "none") {
    el.style.display = "block";
  } else {
    el.style.display = "none";
  }
  document.getElementById('estadoconten' + idx).innerHTML = 'State Div' + idx + ':' + el.style.display;
}

#estadoconten1 {
  border: solid 1px red
}
#conten2 {
  display: none;
  border: solid 1px green
}
#conten3 {
  border: solid 1px blue
}

<button type="button" onclick="cambiar(1)">ChangeDiv1</button>
<button type="button" onclick="cambiar(2)">ChangeDiv2</button>
<button type="button" onclick="cambiar(3)">ChangeDiv3</button>
<div id='estadoconten1'></div>
<div id='estadoconten2'></div>
<div id='estadoconten3'></div>
<br>
<div id='conten1' style='display:none'>
  I am Div 1
</div>
<br>
<div id='conten2'>
  I am Div 2
</div>
<br>
<div id='conten3'>
  I am Div 3
</div>

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

display is not part of the element unless is has specifically been set. see this answer.

document.getElementById(...).style.display is blank

edited May 23 '17 at 12:22

Community

1
1

answered Aug 26 '16 at 23:04

serverSentinel

994
6
20

javascript style.display only work with css inline

3 Answers3