如何在JavaScript中持续检测元素状态并联动调整页面元素样式

嘿，我看你已经搞定了按钮切换元素显示隐藏的功能，但后面的样式判断代码只在页面加载时跑了一次，没法跟着.first-object的状态变化同步更新.second-object的margin-top对吧？这很正常，因为那部分代码没绑定到状态变化的触发事件里，也没有持续监听的机制。

我给你几个不同的解决方案，你可以根据需求选：

方案一：把样式同步逻辑放到点击事件里（最简单直接） #

既然状态变化是由按钮点击触发的，那直接把修改.second-object样式的代码挪到按钮的click回调函数里就行，每次点击切换.first-object状态的同时，同步调整第二个元素的边距：

const button = document.querySelector("button")
const firstObject = document.querySelector(".first-object")
const secondObject = document.querySelector(".second-object")

button.addEventListener("click", function(){
  if(firstObject.style.display === "none"){
    firstObject.style.display = "block"
    secondObject.style.marginTop = "50px"
  } else {
    firstObject.style.display = "none"
    secondObject.style.marginTop = "0"
  }
})

这种方法的好处是简单，完全贴合你当前的代码逻辑，不需要额外复杂机制。

方案二：用MutationObserver监听样式变化（通用型更强） #

如果之后.first-object的显示状态可能通过其他方式改变（比如不是通过这个按钮），那用MutationObserver监听它的style属性变化会更靠谱——不管什么原因导致display改变，都能触发样式同步：

const button = document.querySelector("button")
const firstObject = document.querySelector(".first-object")
const secondObject = document.querySelector(".second-object")

// 按钮切换逻辑不变
button.addEventListener("click", function(){
  if(firstObject.style.display === "none"){
    firstObject.style.display = "block"
  } else {
    firstObject.style.display = "none"
  }
})

// 创建观察者实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 检查是否是display属性变化
    if (mutation.attributeName === "style") {
      secondObject.style.marginTop = firstObject.style.display === "block" ? "50px" : "0"
    }
  })
})

// 配置观察选项：监听style属性变化
observer.observe(firstObject, { attributes: true })

这个方法能覆盖所有可能的状态变化场景，但相对来说代码会多一点。

方案三：用CSS兄弟选择器（最推荐，无JS依赖） #

其实这种关联样式的需求，用CSS处理才是最优雅的，完全不需要JS控制样式。我们可以给.first-object切换类来控制显示隐藏，然后用CSS的兄弟选择器关联.second-object的样式：

首先修改CSS：

.first-object {
  display: none;
}
.first-object.show {
  display: block;
}
/* 两个元素相邻用+；非相邻但同属一个父元素用~ */
.first-object.show ~ .second-object {
  margin-top: 50px;
}

然后修改JS代码，切换类而非直接修改style：

const button = document.querySelector("button")
const firstObject = document.querySelector(".first-object")

button.addEventListener("click", function(){
  firstObject.classList.toggle("show")
})

这种方法把样式逻辑完全交给CSS，JS只负责控制状态类，代码更简洁，也符合前端开发的最佳实践，后期维护起来更方便。

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