JavaScript添加调整大小功能

我需要添加调整大小功能，以便我可以检查，然后在窗口大小调整上应用类。我不能使用媒体查询，所以我必须实现使用JavaScript。JavaScript添加调整大小功能

var mq = window.matchMedia("(min-width: 640px)"); 
 
var el = document.getElementById('output'); 
 

 
if (mq.matches) { 
 
    el.innerHTML ='640 and over'; 
 
    el.className += 'over' 
 
} else { 
 
    el.innerHTML ='640 and under'; 
 
    el.className += 'under' 
 
}

#output{ 
 
    padding:20px; 
 
    color:#fff; 
 
} 
 

 
.over{ 
 
    background:#808; 
 
} 
 

 
.under{ 
 
    background:#f00; 
 
}

<div id="output"></div>

来源

2017-02-16 user3699998

好奇，为什么你不能使用媒体queriies？你是说你不能使用外部库吗？ – jusopi

这里有个问题吗？ – j08691

@ user3699998，你是否要求JavaScript代码在调整大小时检测浏览器窗口的大小？ – user7393973

var el = document.getElementById('output'); 
 
function checkSize() { 
 

 
    if(window.innerWidth >= 640) { 
 
     el.innerHTML = '640 and over'; 
 
     el.className = 'over' 
 
    } else { 
 
    el.innerHTML = 'under 640'; 
 
    el.className = 'under' 
 
    } 
 

 
} 
 
window.addEventListener("resize", checkSize) 
 
checkSize()

#output{ 
 
    padding:20px; 
 
    color:#fff; 
 
} 
 

 
.over{ 
 
    background:#808; 
 
} 
 

 
.under{ 
 
    background:#f00; 
 
}

<div id="output"></div>

来源

2017-02-16 14:05:40 arcs

不起作用？你能检查为什么吗？ – user3699998

@ user3699998当然，对不起。有一个错误 – arcs

JavaScript添加调整大小功能

回答

相关问题