为什么这段代码js控制台输出是空白也不能修改？

Question

想要的效果的最上面的那个紫色广告有个叉叉点掉以后，整个紫色部分消失，然后右侧的那个悬浮菜单栏也跟着网上跑一下，也就是修改style.top的值。
html部分：

<div class="sideBar_right">
        <ul>
            <li><a href="">京东秒杀</a></li>     <!-- 这里的分割线也可以用:after伪类来做，参考京东原版 -->
            <li><a href=""><span>特色优选</span></a></li>
            <li><a href="">频道广场</a></li>
            <li><a href="">为你推荐</a></li>
            <li><a href=""><i class="iconfont icon-gou"></i>客服</a></li>
            <li><a href=""><i class="iconfont icon-bi"></i>反馈</a></li>
            <li><a href="" class="lastLi"><span><i class="iconfont icon-xiangshang"></i>顶部</span></a></li>
        </ul>
    </div>

CSS：

.sideBar_right ul {
    position: absolute;
    top:260px;  /* 75px */
    left:50%;
    width:58px;
    height:408px;
    font-size: 14px;
    background: linear-gradient(270deg,white,#eeeeee,#eeeeee,white);
    margin-left:615px;
    text-align: center;
}

JS:

var sideBarRight = document.querySelector('.sideBar_right ul');
    
    closeBtn.onclick = function () {
        topAd.remove();      
        locationItem.style.top = '30px';
        myJD.style.top = '30px';
        sideBarRight.style.top = '180px';
    }

    // **以上代码都可以实现，但是下面这一句在控制台里是空白的，就是取不到top的值，也修改不了**
    
    console.log(sideBarRight.style.top);

主要就是这最后一句为什么不执行，也不能修改

Answer 1

sideBarRight.style 是获取该元素的内联样式对象，而非所有样式属性的值。如果元素的样式是通过外部样式表或内部样式表来设置的，那么 sideBarRight.style 对象中是不会有这些样式属性的值的。因此在这种情况下，如果您要修改元素的样式属性，可以参考以下两个方法：

方法一：使用 getComputedStyle 方法获取计算后的样式。修改元素的样式属性时，应该根据元素的实际位置来设置属性值。例如：

var sideBarRight = document.querySelector('.sideBar_right ul');

closeBtn.onclick = function () {
  topAd.remove();
  locationItem.style.top = '30px';
  myJD.style.top = '30px';
  // 使用 getComputedStyle 获取实际的 'top' 值
  var topValue = window.getComputedStyle(sideBarRight).getPropertyValue('top');
  var topPos = parseInt(topValue) + 100 + 'px'; // 实际位置 + 100px
  sideBarRight.style.top = topPos;
}

方法二：在您的样式表中，添加一个类似 .moved { top: 280px; } 的规则来定义元素的样式。然后在您的 JavaScript 代码中，使用 classList API 来为元素添加或移除这个类。例如：

.moved {
  top: 280px;
}

var sideBarRight = document.querySelector('.sideBar_right ul');

closeBtn.onclick = function () {
  topAd.remove();
  locationItem.style.top = '30px';
  myJD.style.top = '30px';
  sideBarRight.classList.add('moved');
}

以上两种方法都可以实现将元素向上移动一定的距离。其中第二种方法可以更方便地在样式表中管理元素的样式，但需要在样式表中定义额外的规则。