javascript - 当我们使用 JavaScript 更改元素类时如何将其他样式设置为默认样式

Question

我已经创建了 div 并将其放置在页面的右边距 position:fixed。当我调用 JavaScript 函数时，我需要将 div 放在底部边距。我尝试使用 classList.add() 和 classList.remove() 来完成我的任务。

这是我创建的 CSS 类，

.example-right{
        position:fixed;
        top:50px;
        right:0px;
    }
.example-bottom{
        position:fixed;
        left:50px;
        bottom:0px;
    }

这是我试过的 JavaScript 代码，

function test(){
  document.getElementById('target').classList.remove('example-right');
  document.getElementById('target').classList.add('example-bottom');
}

当我触发 test() 函数时，它会删除 example-right 并将其替换为 example-bottom。但是 div 的 top 值在函数被触发后不会改变。因此，它不会将 div 放在窗口的底部边缘。我可以将 top:## px; 放到 example-bottom 中。但是当页面调整大小时

是否可以使用 CSS 解决此问题。我知道我可以使用 document.getElementById('target').style.top = window.innerHeight- div_Height 更改顶部值。但我想知道有没有办法使用 css 或其他方法来做到这一点。 (否则当我需要改变位置时，我必须一直使用 JavaScript)

仅限纯 CSS 和 JavaScript

Answer 1

你。做对了。唯一的事情就是多了解一点 css。

.example-right{
        position:fixed;
        top:50px;
        right:0px;
    }
.example-bottom{
        position:fixed;
        top:inital
        left:50px;
        bottom:0px;
    }