怎么通过按钮控制div的显示隐藏_随笔

//简单来说就是通过设置按钮的onclick事件来控制div的显示和隐藏。

//比如在CSS中先将div的display设置为"none",那么点击的时候就先查询display值是否为"none"，

//如果为"none"的话，就改为"block"，即显示div；如果不是"block"就改为"none"，隐藏div。

var oButton = document.getElementById("button")//假设HTML中按钮id="button"，并取得。

var oDiv = document.getElementById("div")//假设HTML中div的id="div"，并取得。

oButton.onclick=function(){

if (oDiv.style.display == "none"){

oDiv.style.display = "block"

}else {

oDiv.style.display = "none"

}

//还有就是用三元 *** 作符更简洁一些。

望采纳。

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('button').click(function () {$('#123').css('display', 'block')})。

3、浏览器运行index.html页面，此时点击btn按钮后，div的内容成功被显示了出来。

用JS方法隐藏

if(document.body.scrollWidth < 700){

document.getElementById('float').style.display = 'none'

}

</script>

2.CSS控制

<html>

<head>

.float{

width:100%

height:auto

}

</style>

</head>

<body>

<p class="title">机器人哭啥?</p>

<p class="summary">轮机器人为什么哭。轮机器人为什么哭。轮机器人为什么哭。轮机器人为什么哭。轮机器人为什么哭。轮机器人为什么哭。轮机器人为什么哭。</p>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

怎么通过按钮控制div的显示隐藏