Fatal编程技术网

使用javascript函数显示div

javascript html

使用javascript函数显示div,javascript,html,Javascript,Html,我想在用户单击按钮时在网页上显示一个div 有人知道怎么做吗 到目前为止，我的代码是： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" /> </head> <body> <input id="text" ty

我想在用户单击按钮时在网页上显示一个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>


函数检查（）{
//显示名为level0的我的div应答器；
}
谢谢

布鲁诺

编辑：我所有的代码（我删除了它，因为它太长而且不太清晰）

您可以使用
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，请尝试：

您可以使用
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，请尝试：

谷歌上的快速搜索给了我这个例子：

该示例的源代码为：

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


单击按钮后显示隐藏div层的演示
div{
位置：绝对位置；
左：250px；
顶部：200px；
背景色：#f1f1；
宽度：280px；
填充：10px；
颜色：黑色；
边框：#0000cc 2px虚线；
显示：无；
}
函数集合可见性（id，可见性）{
document.getElementById（id）.style.display=可见性；
}
消息框
谷歌上的快速搜索给了我这个例子：

该示例的源代码为：

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


单击按钮后显示隐藏div层的演示
div{
位置：绝对位置；
左：250px；
顶部：200px；
背景色：#f1f1；
宽度：280px；
填充：10px；
颜色：黑色；
边框：#0000cc 2px虚线；
显示：无；
}
函数集合可见性（id，可见性）{
document.getElementById（id）.style.display=可见性；
}
消息框
将此代码粘贴到
正文中的某个位置

      <div id="myDiv" style="display:none">
          Hello, I am a div
      </div>
您还可以通过编程方式更改
div
内容，从而：

      document.getElementById("myDiv").innerHTML = "Breakfast time";
。。。将文本更改为“早餐时间”。

将此代码粘贴到
正文中的某个位置


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


您还可以通过编程方式更改
div
内容，从而：


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



。。。将文本更改为“早餐时间”。
您可能希望查看jquery，它将使您的生活轻松100倍。
Jquery是一个包含的javascript库（脚本），它允许您非常轻松地操作DOM

首先将最新的Jquery添加到您的头部，这将允许您使用类似$（document）.ready（）的东西
ready（fn）中的函数是一个回调函数；当文档准备好时调用它

$（“#lnkClick”）是一个选择器(http://api.jquery.com/category/selectors/)



$（文档）.ready（函数（）{
$（“#lnkClick”）。单击（函数（）{
$（“#level0”）.attr（“样式”，“显示：块；宽度：100px；高度：100px；边框：实心1px蓝色；”）；
});
});


当然，这个代码可以变得更干净。您要检查：
有很多例子


祝Jquery好运
 您可能想研究jquery，它会让您的生活轻松100倍。
Jquery是一个包含的javascript库（脚本），它允许您非常轻松地操作DOM

首先将最新的Jquery添加到您的头部，这将允许您使用类似$（document）.ready（）的东西
ready（fn）中的函数是一个回调函数；当文档准备好时调用它

$（“#lnkClick”）是一个选择器(http://api.jquery.com/category/selectors/)



$（文档）.ready（函数（）{
$（“#lnkClick”）。单击（函数（）{
$（“#level0”）.attr（“样式”，“显示：块；宽度：100px；高度：100px；边框：实心1px蓝色；”）；
});
});


当然，这个代码可以变得更干净。您要检查：
有很多例子


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




$（文档）.ready（函数（）{
$（“#显示#div_按钮”）。单击（函数（）{
$（“div#u to_show”）.show（）；
返回false；
});
});
单击链接时将显示我

你真的应该使用，有一点学习曲线，但一旦你掌握了，开发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>




$（文档）.ready（函数（）{
$（“#显示#div_按钮”）。单击（函数（）{
$（“div#u to_show”）.show（）；
返回false；
});
});
单击链接时将显示我

谢谢您的回答。我试过了，但没有成功：我的div已经存在（名为level0），当我放置document.body.appendchild（“level0”）时，什么都没有发生。@Tikhon否，但如果不单击，我就可以显示它。因此div不在页面中，您只有它的id吗？还是在页面中看不见？因为我不是为了简洁而写的所有内容，但没有点击它就可以了ok（）。好吧，我在答案的末尾加了一点，如果我理解正确的话，这可能会起作用。谢谢你的回答。我试过了