專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-11-30 10:31:43 來源：動力節(jié)點 瀏覽1026次
利用js基礎(chǔ)寫的顯示隱藏功能。對于初次接觸js的朋友們可能會有些幫助
點擊按鈕可以將紅色區(qū)域隱藏掉，并且可以將按鈕文字顯示成顯示。代碼如下
<!DOCTYPE html> <!--文檔聲明-->
<html lang="en"> <!--根節(jié)點-->
<head><!--樹枝節(jié)點--><!--父節(jié)點-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title><!--子節(jié)點-->
</head>
<style>
#box {
width:200px;
height:200px;
background-color:red;
}
.hidden {
display: none;
}
.show {
display: block;
}
</style>
<body>
<input id="btn" type="button" value="隱藏">
<div id="box"></div>
ESlint 查詢代碼規(guī)范的工具
<script>
//1 獲取元素
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var isshow = true;
// 2 給按鈕注冊點擊事件
btn.onclick = function(){
//當(dāng)前box 是顯示隱藏
if(isshow){
// 3 控制div的顯示隱藏
box.className ='hidden';
//修改按鈕上的文字
btn.value = '顯示';
isshow = false;
}else{
// 3 控制div的顯示隱藏
box.className ='show';
//修改按鈕上的文字
//在事件處理函數(shù)中 this-- 事件源 觸發(fā)事件的對象
btn.value = '隱藏';
isshow = true;
}
};
// 函數(shù)中的this -->window對象
// function fn(){
// console.log(this)
// }
// fn();
// 方法中的 this --> 是調(diào)用該方法的對象
// var obj = {
// name = 'zs',
// say:function(){
// console.log(this);
// }
// }
// obj.say();
//構(gòu)造函數(shù)中的this -->當(dāng)前對象
// 事件處理函數(shù)中的this --> 觸發(fā)事件的對象事件源
</script>
</body>
</html>
官方微信
官方抖音
Java實驗班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號