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添加調整大小功能

回答

相關問題