我正在嘗試僅為小于 700 像素的螢屏實作暗模式。我為所有螢屏全域設定了正文背景，然后有 JS 設定間隔函式，它會在一段時間后將正文背景顏色更改為白色。@media only screen and (max-width: 700px) 有自己的背景黑色集。但是由于設定了間隔功能，它會在一段時間后變回白色。所以請幫助我如何訪問 CSS @media only screen 和 (max-width: 700px) 下的 body background 屬性以在設定的間隔函式內的某個時間后更改背景顏色。我正在尋找已經使用 JS 的 JavaScript 解決方案。有沒有辦法在 JS 函式中使用 CSS 變數
CSS
body {
background: rgba(225,119,119,0.4);
}
@media only screen and (max-width: 700px) and (orientation: portrait) {
body {
background: rgba(0,0,0,1);
}
}
JS
setInterval(function() {
document.body.style.background = "rgba(255,255,255,1)";
}, 292);
/*
There inside the JS function I want to change body background for the css media query
...
do I need if else conditions for this here
like
if(max-width: 700px)
{
document.body.style.background = "rgba(0,0,0,1)";
}
*/
uj5u.com熱心網友回復：
您可以使用 matchMedia API：
if (window.matchMedia("(max-width: 700px)").matches && window.matchMedia("(orientation: portrait)").matches) {
// your code
}
您只需輸入與 CSS 中相同的引數
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/425208.html
標籤：javascript html css
上一篇：帶框架的圓形影像
下一篇：固定頁眉和頁腳，縱橫比正文