使按鈕在任何螢屏尺寸或縮放百分比下成為另一個元素的結尾-有解無憂

我有以下代碼：

 function createalert(content){
        let divs = document.createElement('div')
        let btn = document.createElement('button')
        divs.id = 'alerts'
        btn.id='clearbutton'
        btn.textContent = 'X'
        divs.textContent = content
        document.body.appendChild(divs)
        divs.appendChild(btn)
        btn.addEventListener('click', ()=>{divs.remove()})
      }

createalert('Hello, world!')

    #alerts{
        width: 40vw;
        text-align: center;
        font-size: 20px;
        position: absolute;
        top: 1%;
        left: 30%;
        background:grey
    }

#clearbutton{
        height: 4vh;
        position: relative;
        left: 26%;
        bottom: 10%;
        color: black;
        border: none;
        background: transparent;
        font-weight:bold ;
        font-size: 25px;
    }

我想要實作的是使用包含按鈕的 JS 創建自定義警報。

我想讓按鈕以div任何螢屏尺寸或zoom百分比結束（警報）。

我嘗試使用%并vw實作它，但我沒有這樣做，此css代碼僅適用于我的螢屏尺寸。

誰能給我一個解決方案來解決這個問題？

感謝您的任何回應！

uj5u.com熱心網友回復：

我想最簡單的是使用浮動。

function createalert(content) {
  let container = document.createElement("div");
  let btn = document.createElement("button");
  container.id = "alerts";
  btn.id = "clearbutton";
  btn.textContent = "X";
  container.textContent = content;
  document.body.appendChild(container);
  container.appendChild(btn);
  btn.addEventListener("click", () => {
    container.remove();
  });
}

createalert("Hello, world!");

#alerts {
  width: 40vw;
  text-align: center;
  font-size: 20px;
  position: absolute; 
  top: 1%;
  left: 30%;
  background: grey;
}

#clearbutton {
    height: 4vh;
    color: black;
    border: none;
    background: transparent;
    font-weight: bold;
    font-size: 25px;
    float: right;
}

uj5u.com熱心網友回復：

你可以通過定位，設定#alerts位置relative和#clearButton位置absolute和來做到right:0；像這樣：

function createalert(content) {
  let divs = document.createElement('div')
  let btn = document.createElement('button')
  divs.id = 'alerts'
  btn.id = 'clearbutton'
  btn.textContent = 'X'
  divs.textContent = content
  document.body.appendChild(divs)
  divs.appendChild(btn)
  btn.addEventListener('click', () => {
    divs.remove()
  })
}

createalert('Hello, world!')

#alerts {
  width: 40vw;
  text-align: center;
  font-size: 20px;
  position: absolute;
  top: 1%;
  left: 30%;
  background: grey;
  position:relative;
}

#clearbutton {
  position: absolute;
  right: 0;
  color: black;
  border: none;
  background: transparent;
  font-weight: bold;
  font-size: 22px;
}

你可以更多地了解這個技巧https://css-tricks.com/absolute-positioning-inside-relative-positioning/

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/392821.html

標籤：javascript css

上一篇：Mongoose在陣列屬性中查詢用戶ID

下一篇：映射嵌套陣列并回傳匹配的陣列