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

2023-04-17 0 1,768

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

<div class="sideBar_right">
        <ul>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >京东秒杀</a></li>     <!-- 这里的分割线也可以用:after伪类来做,参考京东原版 -->
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><span>特色优选</span></a></li>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >频道广场</a></li>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >为你推荐</a></li>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><i class="iconfont icon-gou"></i>客服</a></li>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><i class="iconfont icon-bi"></i>反馈</a></li>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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);

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

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');
}

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 有软官网所有资源来源于开发团队,加入会员即可下载使用!如有问题请联系右下角在线客服!
2. 有软官方保障所有软件都通过人工亲测,为每位会员用户提供安全可靠的应用软件、游戏资源下载及程序开发服务。
3. 有软团队针对会员诉求,历经多年拥有现今开发成果, 每款应用程序上线前都经过人工测试无误后提供安装使用,只为会员提供安全原创的应用。
4. PC/移动端应用下载后如遇安装使用问题请联系右下角在线客服或提交工单,一对一指导解决疑难。

有软官网_用软件,找有软 技术分享 为什么这段代码js控制台输出是空白也不能修改? https://www.jiaruvip.com/1556.html

有软应用商店是经过官方安全认证,保障正版软件平台

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务