javascript - 这个div为什么不能消失呢?
本文介绍了javascript - 这个div为什么不能消失呢?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
想要的效果是小于768时 点击按钮可以显示出div 然后让屏幕大于768时 让它div自动消失 之前没有clientWidth那句判断 不行 加上了那句判断也不行 这是为什么?之前实验只有一个div 让它大于768时就消失 试了一下这样可以 但是为什么加上js后就不能消失了呢 真的和js有关系吗?
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#div1{background-color:red;width: 100px;height: 100px;display: none;}
@media(min-width:768px){
#div1{display: none;}
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oDiv1=document.getElementById('div1');
oBtn1.onclick=function(){
var dis=window.getComputedStyle(oDiv1).getPropertyValue("display");
if(dis=="none"){
if(document.body.clientWidth>768){
oDiv1.style.display="none";
}else{
oDiv1.style.display="block";
}
}else{
oDiv1.style.display="none";
}
}
}
</script>
</head>
<button id="btn1">按钮</button>
<div id="div1"></div>
</body>
解决方案
首先,我们得确定document.body.clientWidth
返回的是啥,
console.log(typeof(document.body.clientWidth));//返回number
console.log(document.body.clientWidth);//返回数字
所以你的这句判断:document.body.clientWidth>"768px"
是有问题的。
其次,你的需求是让屏幕大于768时 让它div自动消失,若自动消失的话,你应该直接把判断写在onresize事件里面,从你代码里看,是只有点击按钮后才去判断,与自动消失的需求不符。
window.onresize=function(){
console.log(typeof(document.body.clientWidth));
console.log(document.body.clientWidth);
if(document.body.clientWidth>768){
document.getElementById('div1').style.display="none";
}
}
这篇关于javascript - 这个div为什么不能消失呢?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文