如何使用 javascript 更改 css 類選擇器

Question

大家好，我正在嘗試使用 JavaScript 更改彈出窗口的頂部位置。 這是CSS代碼：

.popup .content {
    position:absolute;
    top:34.2%; //This is what i'm attempting to change
    left:183%;
    transform:translate(-50%,-50%) scale(0);
    background:#fff;
    width:647px; 
    height:333px;
    z-index:2;
    text-align:center;
    padding:20px;
    box-sizing:border-box;
    font-family:"Open Sans",sans-serif;
  }

這是javaScript

                    function togglePopup(){
                    if(document.getElementById("Check1").checked){
                      //Change popup content's top position here
                      document.getElementById("popup-1").classList.toggle("active");
                   }

如果需要，這里是一些 HTML

<div class="popup" id="popup-1">
                      <div class="overlay"></div>
                      <div class="content">
                        <div class="close-btn" onclick="togglePopup()">&times;</div>
                        //inputs go in here
                      </div>

Answer 1

嘗試：

function togglePopup() {
    if (document.getElementById("Check1").checked) {
        //Change popup content's top position here
        document.getElementById("popup-1").style.top = '10%';
    }
}

（未測試）

Answer 2

我看到你想修改

.popup .content {

top:34.2%; //This is what i'm attempting to change

這是具有 .popup 類的容器的第二個孩子

但在javascript 中，您會獲得父容器，即 .popup 類或 #popup-1 id

使用您提供的代碼，我無法進行測試，但可能存在問題