javascript 如果浏览器窗口宽度小于，则隐藏元素并显示其他元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27293133/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide element and show other if browser window width is less than
提问by Macchiato
I'd like to hide an element and show an other element when the user resizes his browser window to a width size that is less than 990px.
当用户将浏览器窗口的大小调整为小于 990 像素的宽度时，我想隐藏一个元素并显示另一个元素。
Hide largeElementwhen window width is less than 990px
Show smallElementwhen window width is less than 990px
当窗口宽度小于990px时隐藏largeElement
显示smallElement当窗口宽度小于990px
<div id="largeElement" style="width:900px;height:100px;background-color:#cc9966"></div>
<div id="smallElement" style="display:none;width:300px;height:100px;background-color:#39c"></div>
Does anyone know of a javascript (no jQuery) that can do this?
有谁知道可以做到这一点的javascript（没有jQuery）？
回答by geevee
here's a plain Javascript solution:
这是一个简单的 Javascript 解决方案：
<div id="largeElement" style="width:900px;height:100px;background-color:#cc9966"></div>
<div id="smallElement" style="display:none;width:300px;height:100px;background-color:#39c"></div>
<script type="text/javascript">
toggle();
window.onresize = function() {
toggle();
}
function toggle() {
if (window.innerWidth < 900) {
document.getElementById('largeElement').style.display = 'none';
document.getElementById('smallElement').style.display = 'block';
}
else {
document.getElementById('largeElement').style.display = 'block';
document.getElementById('smallElement').style.display = 'none';
}
}
</script>
see working example: http://jsfiddle.net/4p3nhy8b/
参见工作示例：http: //jsfiddle.net/4p3nhy8b/
hope that helps.
希望有帮助。
回答by Progeeker
Try this : Using CSS:
试试这个：使用 CSS：
@media (max-width : 990px){
#largeElement{
display : none;
}
#smallElement{
display : block;
}
}
@media (min-width : 991px){
#largeElement{
display : block;
}
#smallElement{
display : none;
}
}
Using Javascript :
使用 Javascript ：
if(window.innerWidth < 990){
document.getElementById("largeElement").style.display = "none";
document.getElementById("smallElement").style.display = "block";
}
else{
document.getElementById("largeElement").style.display = "block";
document.getElementById("smallElement").style.display = "none";
}
回答by DoctorMick
You could do it all with CSS3 media queries
你可以用CSS3 媒体查询来做这一切
<style>
@media (max-width: 990px) {
#largeElement {
display: none;
}
#smallElement {
display: block;
}
}
</style>
I know that's not exactly what you asked for but it's the best solution to the problem IMO.
我知道这不完全是您所要求的，但它是 IMO 问题的最佳解决方案。
回答by Nishit Maheta
Using javascript :
使用 javascript ：
function fun(){
var width = screen.width;
if( width < 990 ){
document.getElementById("largeElement").style.display = "none";
document.getElementById("smallElement").style.display = "show";
}
}
load in body <body onresize="fun()">
or
或者
window.onresize = fun;
