为什么这段代码控制台输出空白且无法修改风格？
代码如下：
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');
};以上就是为什么这段代码控制台输出空白且无法修改元素的样式？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
829
收藏
