html - Unable to override display:none in JavaScript - Stack Overflow

In this case I can not set the element state to visible:<html><head><style type="t

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

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

Share Improve this question asked Apr 4, 2013 at 10:26 PaulPaul 26.7k41 gold badges133 silver badges263 bronze badges 1
  • means the above thing {display:none} is not working, it not reading even {display:block} , because writin block or not wont create any difference, it'll display it as usual – Deepanshu Goyal Commented Apr 4, 2013 at 10:29
Add a ment  | 

4 Answers 4

Reset to default 5

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>

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.

Try this:

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

You also use jQuery, like this.

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

You want to also add jquery library.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745621258a4636529.html

相关推荐

  • html - Unable to override display:none in JavaScript - Stack Overflow

    In this case I can not set the element state to visible:<html><head><style type="t

    10小时前
    10

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信