Rumah > Artikel > hujung hadapan web > javascript怎么实现按钮隐藏div
javascript怎么实现按钮隐藏div
- 藏色散人asal
- 2021-07-17 11:43:582524semak imbas
javascript实现按钮隐藏div的方法：首先创建一个前台示例文件；然后根据id按钮获取点击事件；最后添加事件处理函数即可。
本文操作环境：windows7系统、javascript1.8.5&&html5版，DELL G3电脑
JavaScript点击按钮隐藏和显示div方法
根据id 按钮获取点击事件，添加事件处理函数
效果：
<style>
#dv{
width: 100px;
height: 100px;
background-color: royalblue;
}
</style>
<body>
<input type="button" value="隐藏" id="btn"/>
<!--<input type="button" value="显示" id="btn1"/>-->
<p id="dv"></p>
<script>
function my(id){
return document.getElementById(id);
}
//第一种方法
/*my("btn").onclick=function(){
my("dv").style.display="none";
}
my("btn1").onclick=function(){
my("dv").style.display="block";
}*/
//第二种方法
my("btn").onclick=function(){
if (this.value =="隐藏") {
my("dv").style.display="none";
this.value="显示";
} else if(this.value =="显示"){
my("dv").style.display="block";
this.value="隐藏";
}
}
</script>
</body>推荐学习：《javascript高级教程》
Atas ialah kandungan terperinci javascript怎么实现按钮隐藏div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于electron-vue图片压缩Artikel seterusnya：聊聊Node.js中JSON格式和Excel格式的双向转换