JavaScript09 demo-元素的显示隐藏

来源：互联网发布：python 决策树编辑：程序博客网时间：2024/06/18 16:18

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: orange;

}
</style>
</head>
<body>
<button id="btn">显示</button>
<div id="div1" style="display: none;"></div>
<script type="text/javascript">
var btn=document.getElementById("btn");
var oDiv=document.getElementById("div1");
// btn.onclick=function(){
// if(btn.innerText=="显示"){
// oDiv.style.display="block";
// btn.innerText="隐藏";
// }else{
// oDiv.style.display="none";
// btn.innerText="显示";
// }
////
// };
btn.onclick=function(){
if(oDiv.style.display=="none"){
oDiv.style.display="block";
btn.innerText="隐藏";
}else{
oDiv.style.display="none";
btn.innerText="显示";
}
//
};

var isShow = false; //假定是隐藏
btn.onclick = function() {
if(isShow == false) {
oDiv.style.display = "block";
btn.innerText = "隐藏";
//isShow = true;
} else{
oDiv.style.display = "none";
btn.innerText = "显示";
//isShow = false;
}
isShow = !isShow;
}
// alert(document.body.innerHTML)
//document.body 获取body元素标签
//innertext 元素内的文本
//innerHTML 节点元素内的内容
</script>

</body>
</html>

阅读全文

0 0