因此，有一种在JavaScript上使用媒体查询的方法，但它似乎只在调整窗口大小时才起作用，但当它嵌套在onscroll和onclick函数中时就不能很好地工作。
尝试运行此代码并调整窗口大小，它可以工作，但尝试将浏览器窗口的宽度设置为768px，它可以工作，但当您开始滚动时，它开始返回到tablet media query，它将元素颜色设置为tablet模式而不是桌面模式。即使调整窗口的大小，当它嵌套在函数中时也不能很好地工作。我怎么解决这个？尝试在整页中运行它，以便能够调整窗口的大小
null
window.onscroll = function() {stickynavbar();}
var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var myBtn = document.getElementsByTagName("button")[0];
var desktop = window.matchMedia("(min-width: 768px)");
var tablet = window.matchMedia("(min-width: 600px)");
function stickynavbar() {
function element1Query(desktop){
if (desktop.matches){
element1.style.background = "darkred";
}
else{
element1.style.background = "black";
}
}
element1Query(desktop);
desktop.addListener(element1Query);
function element1TQuery(tablet){
if (tablet.matches){
element1.style.background = "darkblue";
}
else{
element1.style.background = "black";
}
}
element1TQuery(tablet);
tablet.addListener(element1TQuery);
function element2Query(desktop){
if (desktop.matches){
element2.style.background = "darkgreen";
}
else{
element2.style.background = "gray";
}
}
element2Query(desktop);
desktop.addListener(element2Query);
function element2TQuery(tablet){
if (tablet.matches){
element2.style.background = "yellow";
}
else{
element2.style.background = "gray";
}
}
element2TQuery(tablet);
tablet.addListener(element2TQuery);
}.element1{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 1000px;
background: black;
}
.element2{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 1000px;
background: gray;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="element1" id="element1"></div>
<div class="element2" id="element2"></div>
</body>
</html>null
你想这样？
null
window.onscroll = function() {stickynavbar();}
var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var myBtn = document.getElementsByTagName("button")[0];
var desktop = window.matchMedia("(min-width: 768px)");
var tablet = window.matchMedia("(max-width: 600px)");
function stickynavbar() {
function element1Query(desktop){
if (desktop.matches){
element1.style.background = "darkred";
}
else{
element1.style.background = "black";
}
}
element1Query(desktop);
desktop.addListener(element1Query);
function element1TQuery(tablet){
if (tablet.matches){
element1.style.background = "darkblue";
}
else{
element1.style.background = "black";
}
}
element1TQuery(tablet);
tablet.addListener(element1TQuery);
function element2Query(desktop){
if (desktop.matches){
element2.style.background = "darkgreen";
}
else{
element2.style.background = "gray";
}
}
element2Query(desktop);
desktop.addListener(element2Query);
function element2TQuery(tablet){
if (tablet.matches){
element2.style.background = "yellow";
}
else{
element2.style.background = "gray";
}
}
element2TQuery(tablet);
tablet.addListener(element2TQuery);
}.element1{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 1000px;
background: black;
}
.element2{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 1000px;
background: gray;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="element1" id="element1"></div>
<div class="element2" id="element2"></div>
</body>
</html>