
为什么这段代码控制台输出空白且无法修改风格?
代码如下:
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');
};










