JS问题：当指定div可见时如何修改另一div的top CSS属性？

需求与场景 #

我是JavaScript初学者，想要实现：当页面上id为wpadminbar的div可见时，修改class为wrapperInscription的div的top位置。比如用户登录后，网站顶部的adminbar显示时，调整目标div的top值。

对应的HTML结构 #

<!-- A：判断是否可见的后台栏 -->
<div id="wpadminbar" class="nojq"></div>

<!-- B：需要调整top值的目标元素 -->
<div onmouseover="mouseOverToggle()" onmouseout="mouseOutToggle()" id="new" class="child new wrapperInscription"></div>

我尝试写了原生JS和jQuery代码，但都没生效，请问问题出在哪？怎么解决？

你的代码存在的问题 #

原生JS部分 #

1. document.getElementsByClassName()返回的是元素集合（HTMLCollection），不是单个元素，不能直接调用.style.top，必须遍历集合或者取单个元素（比如[0]）。
2. adminbar.style.position只能读取元素的内联样式，如果wpadminbar的position是通过外部CSS文件或<style>标签设置的，这个判断会直接失效。

jQuery部分 #

$('#wpadminbar').length > 0只能判断元素是否存在于DOM中，无法判断元素是否可见（比如元素存在但被display:none隐藏的情况）。

正确的实现方式 #

方式1：原生JavaScript #

// 获取后台栏元素
const adminbar = document.getElementById('wpadminbar');
// 获取所有需要调整的目标元素
const wrapperElements = document.getElementsByClassName('wrapperInscription');

// 封装判断元素是否可见的函数
function isElementVisible(el) {
  const computedStyle = window.getComputedStyle(el);
  // 综合判断元素是否显示：display不为none、visibility不为hidden、实际宽高大于0
  return computedStyle.display !== 'none' && 
         computedStyle.visibility !== 'hidden' && 
         el.offsetWidth > 0 && 
         el.offsetHeight > 0;
}

// 封装调整目标元素top值的函数
function adjustWrapperTop() {
  const targetTop = isElementVisible(adminbar) ? '86px' : '55px';
  // 遍历所有目标元素，逐个设置top样式
  for (const el of wrapperElements) {
    el.style.top = targetTop;
  }
}

// 页面加载完成后执行调整
window.addEventListener('DOMContentLoaded', adjustWrapperTop);

// 如果后台栏会动态显示/隐藏（比如登录/登出），可以添加监听
// 示例：用MutationObserver监听后台栏的样式变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    adjustWrapperTop();
  });
});
observer.observe(adminbar, { attributes: true, attributeFilter: ['style', 'class'] });

方式2：jQuery（项目已引入jQuery时使用） #

$(document).ready(function() {
  // 封装调整函数
  function adjustWrapperTop() {
    const isVisible = $('#wpadminbar').is(':visible');
    $('.wrapperInscription').css('top', isVisible ? '86px' : '55px');
  }

  // 页面加载完成后执行
  adjustWrapperTop();

  // 监听后台栏的样式/类变化，动态调整
  const observer = new MutationObserver(() => {
    adjustWrapperTop();
  });
  observer.observe($('#wpadminbar')[0], { attributes: true, attributeFilter: ['style', 'class'] });
});

补充提示 #

如果WordPress后台栏是通过添加/移除类来控制显示隐藏的（比如默认的hidden类），可以直接判断类的存在，更高效：

• 原生JS：!adminbar.classList.contains('hidden')
• jQuery：!$('#wpadminbar').hasClass('hidden')

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