使用javascript函數顯示div
[英]Display a div using a javascript function
問題描述
當用戶單擊按鈕時，我想在網頁上顯示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>
謝謝，
布魯諾
編輯：我所有的代碼（我已經刪除了它，因為它太長而且不太清楚）
5 個解決方案
解決方案1
5 已采納 2011-04-14 08:16:30
您可以使用document.createElement("div")實際制作div。 然后，您可以使用innerHTML填充div文本。 之后，使用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;
}
如果頁面中已經有ID為“ level0”的div，請嘗試：
function check() {
var div = document.getElementById("level0");
div.innerHTML = document.getElementById("text").value;
}
解決方案2
2 2011-04-14 08:18:05
在Google上進行的快速搜索給出了以下示例：
該示例的源代碼為：
<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>
解決方案3
2 2011-04-14 08:19:27
將此代碼粘貼到您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";
...會將文字更改為“早餐時間”。
解決方案4
2 2011-04-14 08:44:07
您可能想研究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中好運！
解決方案5
1 2011-04-14 08:45:39
您確實應該使用jquery ，這有一點學習曲線，但是一旦掌握了它，開發Web應用程序就容易得多。
<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>
用於在a中顯示動態消息的JavaScript函數 <div> 容器
[英]JavaScript function to display a dynamic message in a <div> container
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.