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

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

代码如下：

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

登录后复制

以上就是为什么这段代码控制台输出空白且无法修改元素的样式？的详细内容，更多请关注米云其它相关文章！