如何在JavaScript循环中结合媒体查询修复移动端背景色问题

我在移动端查看页面时，.disponibilite_mh元素的背景色无法正常展示。已添加CSS媒体查询调整布局，同时尝试用JavaScript结合媒体查询控制背景色，但效果不符合预期。

现有CSS代码：

@media screen and (max-device-width: 700px)
and (orientation: portrait) {
  .vc_gitem-zone-mini .disponibilite_mh{
    transform:rotate(40deg);
    position:absolute;
    top:-200px;
    left:100px;
    color:white;
    height:30px;
    padding:0;
    width:100%;
  }

  .mh_list_item{
    width:20rem;
    padding:0!important;
    margin:0!important;
  }
}

现有JavaScript代码：

function changeBackgroundColor() {
const elements = document.getElementsByClassName("disponibilite_mh");
for (let element of elements) {
    switch (element.innerText) {
        case 'Disponible':
            element.style.backgroundColor = 'green';
            break;
        case 'Réservé':
            element.style.backgroundColor = 'orange';
            break;
        case 'Vendu':
            element.style.backgroundColor = 'red';
            break;
        default:
            element.style.backgroundColor = 'white';
            } 
        }
    }

window.onload = changeMediaQuery;

function changeMediaQuery(x) {
if (x.matches) { // If media query matches
window.onload = changeBackgroundColor;
}
else {
return;
}
}

var x = window.matchMedia("(max-width: 700px)")
changeMediaQuery(x)
x.addListener(changeMediaQuery)

你的代码存在两个核心问题：

1. 媒体查询条件不统一：CSS使用max-device-width:700px + portrait，但JS里用的是max-width:700px，两者触发条件不一致，导致移动端无法正确触发JS逻辑。
2. window.onload覆盖问题：页面加载完成后，window.onload事件不会再次触发，在changeMediaQuery里重新赋值该事件无法执行背景色设置。

修改后的JavaScript代码：

// 通用背景色设置函数，适配所有设备场景
function changeBackgroundColor() {
  const elements = document.getElementsByClassName("disponibilite_mh");
  for (let element of elements) {
    // 加trim()避免文本前后空格导致匹配失败
    switch (element.innerText.trim()) {
      case 'Disponible':
        element.style.backgroundColor = 'green';
        break;
      case 'Réservé':
        element.style.backgroundColor = 'orange';
        break;
      case 'Vendu':
        element.style.backgroundColor = 'red';
        break;
      default:
        element.style.backgroundColor = 'white';
    }
  }
}

// 媒体查询回调：匹配时直接执行背景色设置
function changeMediaQuery(x) {
  changeBackgroundColor(); // 无论匹配与否都执行，确保两端样式同步；若仅移动端需要，可改为if(x.matches)才执行
}

// 初始化逻辑
window.onload = function() {
  // 页面加载完成先执行一次背景色设置
  changeBackgroundColor();
  // 绑定与CSS一致的媒体查询条件
  const mediaQuery = window.matchMedia("screen and (max-device-width: 700px) and (orientation: portrait)");
  changeMediaQuery(mediaQuery);
  // 监听窗口变化，实时调整样式
  mediaQuery.addListener(changeMediaQuery);
};

额外优化建议：

• 如果CSS中.disponibilite_mh的样式存在优先级覆盖问题，可以在CSS媒体查询中添加background-color: inherit !important;，确保JS设置的行内样式能正常生效。

内容的提问来源于stack exchange，提问作者yo2b