使用javascript函數顯示div

我想在用戶單擊按鈕時在網頁上顯示div。使用javascript函數顯示div

有人知道如何做到這一點嗎？

我的代碼，到目前爲止，是：

 <html> 
     <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" /> 
     </head> 
     <body> 
      <input id="text" type="text" size="60" value="Type your text here" /> 
      <input type="button" value="When typing whatever text display the div balise on the page" onclick="check();" /> 

      <script type="text/javascript"> 

     function check() { 
       //Display my div balise named level0; 
     } 

      </script> 

     </body> 
     </html>

感謝，

布魯諾

編輯：我所有的代碼（我已經刪除，因爲它太長，不是很清楚）

來源

2011-04-14 Bruno

您可以使用document.createElement("div")來實際製作div。然後你可以使用innerHTML填充文本。之後，使用appendChild將其添加到身體。全部告訴，它可以看起來像這樣：

function check() { 
    var div = document.createElement("div"); 
    div.innerHTML = document.getElementById("text").value; 
    document.body.appendChild(div); 
}

這將每次按下按鈕時添加div。如果您想更新DIV每次相反，你可以聲明div變量函數外：

var div; 
function check() { 
    if (!div) { 
     div = document.createElement("div"); 
     document.body.appendChild(div); 
    } 

    div.innerHTML = document.getElementById("text").value; 
}

如果你有一個「0級」的ID在頁面已經DIV，嘗試：

function check() { 
    var div = document.getElementById("level0"); 
    div.innerHTML = document.getElementById("text").value; 
}

來源

2011-04-14 08:16:30

感謝您的回答。我試過了，它不起作用：我的div已經存在（命名爲level0），當我把document.body.appendchild（「level0」）沒有任何反應。 – Bruno 2011-04-14 08:26:41

div是否已經在頁面上，然後可見？ – 2011-04-14 08:27:48

@Tikhon不，但沒有點擊我可以顯示它。 – Bruno 2011-04-14 08:28:35

在谷歌快速搜索給了我這個例子：

Demo of hide/show div

該示例的源代碼是：

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<html> 
<head> 
<title>Demo of Show hide div layer onclick of buttons</title> 
<META NAME="DESCRIPTION" CONTENT="Displaying and hiding div layers through button clicks"> 
<META NAME="KEYWORDS" CONTENT="Show layer, hide layer, display div, hide div, button on click, button on click event, div property, div style set"> 
<style type="text/css"> 
div { 
position: absolute; 
left: 250px; 
top: 200px; 
background-color: #f1f1f1; 
width: 280px; 
padding: 10px; 
color: black; 
border: #0000cc 2px dashed; 
display: none; 
} 
</style> 


<script language="JavaScript"> 
function setVisibility(id, visibility) { 
document.getElementById(id).style.display = visibility; 
} 

</script> 
</head> 
<body> 

<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";> 

<div id="sub3">Message Box</div> 
<br><br> 
</body> 
</html>

來源

2011-04-14 08:18:05

這段代碼在你的body

 <div id="myDiv" style="display:none"> 
      Hello, I am a div 
     </div>

地方粘貼添加這個片段到您的check()函數來顯示，否則隱藏的內容。

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

你也可以改變div內容編程這樣的：

 document.getElementById("myDiv").innerHTML = "Breakfast time";

...將文本更改爲 '早餐時間'。

來源

2011-04-14 08:19:27

感謝您的回答。我試過了，它不起作用：我的div已經存在（名爲level0），當我把document.getElementById（「level0」），style.display =「block」時，什麼都不會發生。 – Bruno 2011-04-14 08:27:48

我在代碼中看不到一個名爲'level0'的div。 – 2011-04-14 08:29:29

因爲我沒有寫出所有的簡潔問題，但沒有點擊它的工作正常（

）。 – Bruno 2011-04-14 08:31:39

你可能想看看jquery，它會讓你的生活容易100倍。 Jquery是一個JavaScript庫（腳本），您可以輕鬆操作DOM。

從頭開始添加最新的Jquery，這將允許您使用類似$（document）.ready（）的東西 .ready（fn）中的函數是一個回調函數;它在文檔準備好時被調用。

$（「＃lnkClick」）是當然此代碼可以由清潔器的選擇器（http://api.jquery.com/category/selectors/）

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#lnkClick").click(function() { 
        $("#level0").attr("style", "display: block;width: 100px; height: 100px; border: solid 1px blue;"); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="level0" style="display:none;"> 
     </div> 

     <a href="#" id="lnkClick">Click me</a> 
    </body> 
</html>

。你想檢查：http://api.jquery.com/click/ 有很多的例子。

祝Jquery好運！

來源

2011-04-14 08:44:07 Abdo

jquery的+1，但我認爲你的代碼示例過於複雜 – Jason 2011-04-14 08:47:22

你真的應該使用jquery，有一點點的學習曲線，但一旦你得到它，開發網絡應用程序就容易多了。

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#show_div_button").click(function() { 
     $("#div_to_show").show(); 
     return false; 
    }); 
}); 
</script> 
</head> 
<body> 
    <a href="#" id="show_div_button">Click Me to Show the Div</a> 
    <div style="display:none" id="div_to_show">I will be shown when the link is clicked</div> 
</body> 
</html>

來源

2011-04-14 08:45:39 Jason

你可以複製和粘貼上面的代碼到一個文件，並啓動它在瀏覽器中測試 – Jason 2011-04-14 08:46:34

使用javascript函數顯示div

回答

相關問題