專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-11-30 10:31:43 來源：動力節點 瀏覽988次
利用js基礎寫的顯示隱藏功能。對于初次接觸js的朋友們可能會有些幫助
點擊按鈕可以將紅色區域隱藏掉，并且可以將按鈕文字顯示成顯示。代碼如下
<!DOCTYPE html> <!--文檔聲明-->
<html lang="en"> <!--根節點-->
<head><!--樹枝節點--><!--父節點-->
<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><!--子節點-->
</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 查詢代碼規范的工具
<script>
//1 獲取元素
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var isshow = true;
// 2 給按鈕注冊點擊事件
btn.onclick = function(){
//當前box 是顯示隱藏
if(isshow){
// 3 控制div的顯示隱藏
box.className ='hidden';
//修改按鈕上的文字
btn.value = '顯示';
isshow = false;
}else{
// 3 控制div的顯示隱藏
box.className ='show';
//修改按鈕上的文字
//在事件處理函數中 this-- 事件源 觸發事件的對象
btn.value = '隱藏';
isshow = true;
}
};
// 函數中的this -->window對象
// function fn(){
// console.log(this)
// }
// fn();
// 方法中的 this --> 是調用該方法的對象
// var obj = {
// name = 'zs',
// say:function(){
// console.log(this);
// }
// }
// obj.say();
//構造函數中的this -->當前對象
// 事件處理函數中的this --> 觸發事件的對象事件源
</script>
</body>
</html>
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號