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的最高值不会改变。所以，它不是将div放在窗口的下边缘。我可以将top:## px;添加到example-bottom。但是当页面调整大小和

时

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

仅限纯CSS和JavaScript

Answer 1

你。做得对。唯一的事情是更多地了解一点css。

＆＃13;

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

＆＃13;

Answer 2

添加此css

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

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

.example-right{
        position:fixed;
        top:50px;
        right:0px;
    }
.example-bottom{
        position:fixed;
        left:50px;
        bottom:0px;
        top:auto;
    }
    #target{
      width:200px;
      height:200px;
      background:red;
    }

<div id="target" class="example-right">

</div>
<br/>
<button onclick="test()">Click</button>

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

2 个答案: