您的位置：首页 > Web前端 > HTML

设计元素的显示与隐藏，并实现按钮文字改变

2017-11-10 15:29 363 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<script>
<body>
window.onload=function()
{
var oBtn=document.getElementById("btn1");
var txt_1=document.getElementById("txt1");
var txt_2=document.getElementById("txt2");
oBtn.onclick=function()
{
if(txt_2.style.display=="block")
{
txt_1.style.display="block";
txt_2.style.display="none";
oBtn.innerHTML = "更新须知"
}
else
{
txt_1.style.display="none";
txt_2.style.display="block";
oBtn.innerHTML = "返回"
}
} }
</script>
<div class="col-md-12 column">
<div id="txt1" class="jumbotron">
<h1>
Welcome
</h1>
</div>
<div id="txt2" class=" alert alert-dismissable alert-info">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4>
注意!
</h4>
<p>
<input type="button" id="btn1" value="按钮"/>
</p>
</body>
</html>

展示效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 显示隐藏 HTML

相关文章推荐

新的分享

章节导航