使用 javascript 函数显示一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5660334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display a div using a javascript function
提问by Bruno
I'd like to display a div on a webpage when a user clicks on a button.
当用户单击按钮时，我想在网页上显示一个 div。
Does someone know how to do this ?
有人知道怎么做吗？
My code, so far, is :
到目前为止，我的代码是：
<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>
Thanks,
谢谢，
Bruno
布鲁诺
EDIT: All my code (I've erased it because it was too long and not very clear)
编辑：我所有的代码（我已经删除了它，因为它太长而且不太清楚）
回答by Tikhon Jelvis
You can use document.createElement("div")to actually make the div. Then you can populate the div using innerHTMLfor the text. After that, add it to the body using appendChild. All told, it can look like this:
您可以使用document.createElement("div")来实际制作 div。然后您可以填充innerHTML用于文本的 div 。之后，使用 将其添加到正文中appendChild。总而言之，它看起来像这样：
function check() {
var div = document.createElement("div");
div.innerHTML = document.getElementById("text").value;
document.body.appendChild(div);
}
This will add a div every time the button is pressed. If you want to update the div each time instead, you can declare the divvariable outside the function:
这将在每次按下按钮时添加一个 div。如果你想每次都更新 div，你可以div在函数外声明变量：
var div;
function check() {
if (!div) {
div = document.createElement("div");
document.body.appendChild(div);
}
div.innerHTML = document.getElementById("text").value;
}
If you have the div already in the page with an id of "level0", try:
如果页面中已经有一个 id 为“level0”的 div，请尝试：
function check() {
var div = document.getElementById("level0");
div.innerHTML = document.getElementById("text").value;
}
回答by Simon Stender Boisen
A quick search on google gave me this example:
在谷歌上快速搜索给了我这个例子：
The source-code for that example is:
该示例的源代码是：
<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>
回答by Jim Blackler
Paste this code somewhere in your body
将此代码粘贴到您的某个位置 body
<div id="myDiv" style="display:none">
Hello, I am a div
</div>
Add this snippet into your check()function to display the otherwise-hidden content.
将此代码段添加到您的check()函数中以显示否则隐藏的内容。
document.getElementById("myDiv").style.display = "block";
You could also change the divcontent programmatically thus:
您还可以以div编程方式更改内容，因此：
document.getElementById("myDiv").innerHTML = "Breakfast time";
... would change the text to 'Breakfast time'.
...将文本更改为“早餐时间”。
回答by Abdo
You might want to look into jquery, it'll make your life 100 times easier. Jquery is a javascript library (script) that you include and it allows you to manipulate the DOM very easily.
你可能想研究 jquery，它会让你的生活轻松 100 倍。Jquery 是您包含的 javascript 库（脚本），它允许您非常轻松地操作 DOM。
Start by adding the latest Jquery to your head which will allow you to use something like $(document).ready( ) The function inside .ready( fn ) is a callback function; it get called when the document is ready.
首先将最新的 Jquery 添加到您的头脑中，这将允许您使用诸如 $(document).ready() 之类的东西。 .ready( fn ) 中的函数是一个回调函数；当文档准备好时它会被调用。
$("#lnkClick") is a selector (http://api.jquery.com/category/selectors/)
$("#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>
Of course this code can be made cleaner. You want to check: http://api.jquery.com/click/There are plenty of examples.
当然，这段代码可以更简洁。你要检查：http: //api.jquery.com/click/有很多例子。
Best of luck with Jquery!
祝 Jquery 好运！
回答by Jason
you really should be using jquery, there's a little bit of a learning curve but once you get it, developing web apps is much easier.
你真的应该使用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>
