为什么这段代码控制台输出空白且无法修改元素的样式？

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《为什么这段代码控制台输出空白且无法修改元素的样式？》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

为什么这段代码控制台输出空白且无法修改风格？

代码如下：

var sidebarright = document.queryselector('.sidebar_right ul');

// ...其他代码

console.log(sidebarright.style.top);

控制台输出空白的原因是：

sidebarright.style 获取的是元素的内联样式对象，而不是所有样式属性的值。如果元素的样式通过外部或内部样式表设置，则该对象不会包含这些属性值。

要修改元素的样式属性，可以采用以下方法：

方法 1：使用 getcomputedstyle 获取计算后的样式

var sidebarright = document.queryselector('.sidebar_right ul');

closebtn.onclick = function () {
  // ...其他代码

  // 使用 getcomputedstyle 获取实际的 'top' 值
  var topvalue = window.getcomputedstyle(sidebarright).getpropertyvalue('top');
  // 计算新的 'top' 值
  var toppos = parseint(topvalue) + 100 + 'px';
  // 设置新的 'top' 值
  sidebarright.style.top = toppos;
};

方法 2：在样式表中定义规则并使用 classlist api

样式表：

.moved {
  top: 280px;
}

javascript：

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

closeBtn.onclick = function () {
  // ...其他代码

  // 添加 'moved' 类
  sideBarRight.classList.add('moved');
};

终于介绍完啦！小伙伴们，这篇关于《为什么这段代码控制台输出空白且无法修改元素的样式？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！