html如何模拟点击隐藏button(可用js)?

html如何模拟点击隐藏button(可用js)?,第1张

onchange时

获取你那个button对象

调用你那个button对象的click()方法

-------------部分代码演示---------------------

<head>

<script language="javascript" type="text/javascript">

function test(){

alert("this is bt2 click")

}

</script>

</head>

<body>

<input type="button" id='bt1' onclick=" document.getElementById('bt2').click()" value="bt1">

<input type="button" id='bt2' onclick="test()" value="bt2" style="display: none">

</body>

</html>

隐藏可以使用CSS属性中的display属性,属性值设置为:none

例如:

button{ display:none }

即可实现隐藏

display属性介绍:

添加这段js就可以啦,(为了好看,我把button样式也设置了一下,你复制一下我的代码,预览一下就能看到)

如图:

<!DOCTYPE html>

<html>

<head>

<title>hello world</title>

<style type="text/css">

body {

background-color: red

}

.mydiv {

font-size: 72px

}

div {

border: 3px solid #000

}

button{

padding: 7px 14px

outline: none

background:#e9686b

color:#fff

border:1px solid #ccc

border-radius: 4px

transition: all 0.6s /* 添加过渡效果 */

cursor: pointer /* 鼠标移入显示小手 */

}

button:hover{

background-color: #07c160

}

</style>

<meta charset="utf-8">

</head>

<body>

<!-- html代码,写在body内更规范 -->

<h>你好,世界</h>

<center>

<div class="mydiv"><a href="http://baidu.com"><i>hello world</i></a></div>

</center>

<button class="hidebtn" >duang,消失</button>

<button class="showbtn">它又出现啦</button>

<script type="text/javascript">

var hideBtn = document.querySelector('.hidebtn') //获取隐藏button

var showBtn = document.querySelector('.showbtn') //获取显示button

var mydiv = document.querySelector('.mydiv') //获取需要隐藏的div

hideBtn.onclick=function(){

mydiv.style.display= 'none' //隐藏div

}

showBtn.onclick = function(){

mydiv.style.display= 'block'//显示div

}

</script>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8311366.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存