想要的效果是小于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
返回的是一个number对象啊...
改成 document.body.clientWidth > 768
首先,我们得确定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";
}
}
像这种情况,我觉得要么就都用js来改样式,js修改的display是加在行间的,优先级肯定高于页内样式,所以后来在通过media媒体查询修改的样式就不起效了,除非加!important