如何检测div#ads的display属性变化以控制div.hidens显隐，兼容多端

• 原代码仅绑定了.view元素的点击事件才检测#ads的显示状态，若#ads的display属性变化不是由点击.view触发，检测逻辑不会执行
• 代码存在两处拼写错误：一是#ads显示时的目标选择器写为$(".hiden")，与实际类名hidens不符；二是关闭按钮的点击事件写为hide()，实际函数名为hidethis，两处错误都会导致逻辑执行后无效果
• 无DOM属性变化监听逻辑，无法自动响应#ads的属性变更

使用MutationObserver监听#ads元素的属性变化，该API兼容所有现代桌面端、移动端浏览器（安卓4.4+、iOS 7+、IE11+），完全满足跨端要求。

修正后的完整代码如下：

<body class="view">
<div class="ads" id="ads">
<div class="close_ads" id="ads_close"></div>
<!-- div ads内容及关闭按钮位于此处... -->
</div>

<div id="hover_vid" class="fade"><div class="hidens"><button id="close_ho" style="margin-left:5px;float:right;border-color: #fff;" class="button-yes" type="submit" onclick="hidethis();">X</button>»» 此处为内容 ««</div></div>

<script>
function hidethis(){ 
  document.getElementById("hover_vid").style.display="none"; 
};

// 状态同步逻辑
function syncHidensStatus() {
  if($("#ads").css("display") == "block" ){
    $(".hidens").css("display", "none");
  } else {
    $(".hidens").css("display", "block");
  }
}
// 页面加载先同步一次初始状态
syncHidensStatus();

// 监听ads元素的属性变化
const adsNode = document.getElementById('ads');
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 仅监听style属性变化触发同步
    if(mutation.attributeName === 'style') {
      syncHidensStatus();
    }
  });
});
// 配置监听规则：监听属性变更
observer.observe(adsNode, { attributes: true });

// 保留原点击逻辑，覆盖手动交互场景，两者互不冲突
$(".view").click(function(){
  syncHidensStatus();
});
</script>
</body>

• 页面加载后先执行一次状态同步，保证初始展示符合需求
• MutationObserver会持续监听#ads的属性变化，只要style属性发生修改就自动同步hidens的显示状态
• 原有点击逻辑保留，覆盖手动点击交互场景，两种逻辑互不冲突

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