JS控制台输出空白且样式无法修改：getComputedStyle与CSS类名如何解决？

JS控制台输出空白及样式修改失败：getComputedStyle与CSS类名解决方案

在javascript dom操作中，修改元素样式时，控制台输出空白且样式无法修改的情况时有发生。本文将分析此问题，并提供两种解决方案。

问题：开发者希望点击关闭按钮后移除顶部广告，并调整右侧悬浮菜单栏（.sidebar_right ul）的位置。然而，console.log(sidebarright.style.top); 输出空白，无法获取或修改top属性。这是因为sidebarright.style.top仅获取元素的内联样式，而目标元素的top属性是通过外部样式表设置的。

解决方案一：使用getComputedStyle方法

getComputedStyle方法可获取元素计算后的样式，包括继承样式。我们可以用它获取top属性的实际值，再进行修改：

立即学习“前端免费学习笔记（深入）”；

const sidebarright = document.querySelector('.sidebar_right ul');closebtn.onclick = function() {  topad.remove();  locationitem.style.top = '30px';  myjd.style.top = '30px';  // 获取计算后的top值  const topValue = window.getComputedStyle(sidebarright).getPropertyValue('top');  const topPos = parseInt(topValue) + 100 + 'px'; // 实际位置 + 100px (可调整)  sidebarright.style.top = topPos;};

登录后复制