CODEWITHSUNDEEP
javascripthtmlcss
Paul
Paul

Reputation: 26640

Unable to override display:none in JavaScript

In this case I can not set the element state to visible:

<html>
<head>
  <style type="text/css">
    #elem {display:none}
  </style>
</head>
<body>
  <div id="elem">.......</div>
  <script type="text/javascript">
    document.getElementById("elem").style.display="";
  </script>
</body>
</html>

it works only when I set display to "block".

In this case it works:

<html>
<head>
</head>
<body>
  <div id="elem" style="display:none">.......</div>
  <script type="text/javascript">
    document.getElementById("elem").style.display="";
  </script>
</body>
</html>

My interest is to make it work in first case without setting "block".

Upvotes: 3

Views: 3715

Answers (4)

Bharat Chodvadiya
Bharat Chodvadiya

Reputation: 1650

You also use jQuery, like this.

<script type="text/javascript">
 jQuery('#elem').css('display','');
</script>

You want to also add jquery library.

Upvotes: -3

S&#233;bastien Garmier
S&#233;bastien Garmier

Reputation: 1263

Try this:

document.getElementById("elem").style.display="block";

Upvotes: -1

dave
dave

Reputation: 4104

Why do you want to use inline styles instead of css classes?

<html>
<head>
  <style type="text/css">
    #elem.hidden {display:none}
  </style>
</head>
<body>
  <div id="elem" class="hidden">.......</div>
  <script type="text/javascript">
    document.getElementById("elem").className = '';
  </script>
</body>
</html>

Upvotes: 5

Quentin
Quentin

Reputation: 943142

Setting the .style.display property to "" will remove any inline style from the element. The previous value in the cascade will then apply.

In this case, there is no inline style to start with, and the "none" value is already received from the cascade.

You could set the value to the "initial" keyword, but you may find browser support lacking.

You've abstracted whatever the underlying problem that you are trying to solve by modifying the display property away, but there is a good chance that you would be better off with:

#elem.JSOnly {display:none}

with:

<div id="elem" class="JSOnly">

and

document.getElementById('elem').className = ""

or similar.

Upvotes: 3

Related Questions