如何在CSS規則中顯示有display：none的元素？

Question

我有一個非常簡單的外部css樣式表，它具有以下內容：

div.hideBox {
    display:none;
}

因此，當加載html頁面時，具有該類屬性“hideBox”的div將不會顯示在頁面上，這就是我想要的。 但是當用戶點擊同一頁面上的按鈕時，我會顯示/顯示該框。 我嘗試使用onclick事件來執行此操作，但div不會顯示。

例如，代碼將是：

<script language="javascript">
function showmydiv() {
document.getElementById('mybox').style.display = "";
}

</script>
</head>
<body>
<div id="mybox" class="hideBox">
some output of text
</div>
<input type="button" name="ShowBox" value="Show Box" onclick="showmydiv()">

奇怪的是，當我使用visibility:hidden; position:absolute;時，與此類似的設置有效visibility:hidden; position:absolute; visibility:hidden; position:absolute; 我可以使用JavaScript函數來顯示<div> 。

我在這做錯了什么？

Answer 1

因為將div的display樣式屬性設置為""不會改變CSS規則本身的任何內容。 這基本上只是創建一個“空的” 內聯 CSS規則，除了清除該元素上的相同屬性之外沒有任何效果。

您需要將其設置為具有值的內容：

document.getElementById('mybox').style.display = "block";

如果要替換div上的內聯樣式，那么您正在做的事情會起作用，如下所示：

<div id="myBox" style="display: none;"></div>

document.getElementById('mybox').style.display = "";

Answer 2

document.getElementById('mybox').style.display = "block";

Answer 3

嘗試將顯示設置為在javascript中阻止而不是空白值。

Answer 4

我可以看到你想為此編寫自己的簡短javascript，但是你是否考慮使用Frameworks進行HTML操作？ jQuery是我這個任務的首選工具，雖然它對你當前的問題來說太過分了，因為它有很多額外的功能。

在這里看一下jQuery

如何在CSS規則中顯示有display：none的元素？

問題描述

4 個解決方案

解決方案1
79 已采納 2010-11-01 16:07:33

解決方案2
13 2010-11-01 16:07:32

解決方案3
6 2010-11-01 16:07:42

解決方案4
2 2010-11-01 16:21:48

如何在CSS規則中顯示有display：none的元素？

問題描述

4 個解決方案

解決方案1 79 已采納 2010-11-01 16:07:33

解決方案2 13 2010-11-01 16:07:32

解決方案3 6 2010-11-01 16:07:42

解決方案4 2 2010-11-01 16:21:48

解決方案1
79 已采納 2010-11-01 16:07:33

解決方案2
13 2010-11-01 16:07:32

解決方案3
6 2010-11-01 16:07:42

解決方案4
2 2010-11-01 16:21:48