Question

在这种情况下，我无法将元素状态设置为可见：

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

仅当我将显示设置为“阻止”时才有效。

在这种情况下，它有效：

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

我的兴趣是让它在第一种情况下工作而不设置“阻止”。

Answer 1

为什么要使用内联样式而不是css类？

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

Answer 2

将.style.display属性设置为""将从元素中删除任何内联样式。然后将应用级联中的先前值。

在这种情况下，没有内联样式可以开始，并且已经从级联中接收到"none"值。

您可以将值设置为the "initial" keyword，但您可能会发现缺少浏览器支持。

你已经通过修改display财产来抽象你试图解决的任何潜在问题，但很有可能你会更好：

#elem.JSOnly {display:none}

使用：

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

和

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

或类似。

Answer 3

试试这个：

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

Answer 4

你也使用jQuery，就像这样。

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

您还想添加jquery库。

无法在JavaScript中覆盖display：none

4 个答案: