当用户将浏览器窗口大小调整为小于990像素的宽度时,我想要隐藏元素并显示其他元素。
当窗口宽度小于990像素时隐藏 largeElement
当窗口宽度小于990px时显示 smallElement
<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>
有没有人知道可以做到这一点的javascript(没有jQuery)?
答案 0 :(得分:4)
这是一个简单的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>
希望有所帮助。
答案 1 :(得分:1)
试试这个: 使用CSS:
@media (max-width : 990px){
#largeElement{
display : none;
}
#smallElement{
display : block;
}
}
@media (min-width : 991px){
#largeElement{
display : block;
}
#smallElement{
display : none;
}
}
使用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";
}
答案 2 :(得分:0)
您可以使用CSS3 media queries
完成所有操作<style>
@media (max-width: 990px) {
#largeElement {
display: none;
}
#smallElement {
display: block;
}
}
</style>
我知道这不是你要求的,但它是IMO问题的最佳解决方案。
答案 3 :(得分:0)
使用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()">
或
window.onresize = fun;