在不移動以下元素的情況下顯示div-有解無憂

是否有一個 css 屬性，我可以將其應用于包含錯誤訊息的 div，以便在不移動以下元素的情況下顯示它，如圖所示：

在不移動以下元素的情況下顯示 div

這是我的 html 代碼：

        <div class="child">
            <label for="signInName">Adresse courriel</label>
            <input id="signInName" type="text"></input> 
            <div class="error itemLevel" aria-hidden="false" style="display: block;">
                <p>ce courriel est invalide</p>
            </div>
        </div>
        <div class="child">
            <label for="password">Mot de passe</label>
            <input id="password" type="text"></input>   
            <div class="error itemLevel" aria-hidden="false" style="display: block;">
                <p>Entrez votre mot de passe</p>
            </div>
        </div>
    </div>

感謝幫助

uj5u.com熱心網友回復：

使用visibility屬性

可見性 CSS 屬性在不改變檔案布局的情況下顯示或隱藏元素。

用于line-height: 32px;設定訊息的高度，這確實會設定兩個輸入之間的差距。

您可以切換行內樣式

function showErrors() {
    document.querySelectorAll('.error.itemLevel').forEach((node) => node.style.visibility = "visible");
}

.itemLevel {
  line-height: 32px;
}

<div class="child">
    <label for="signInName">Adresse courriel</label>
    <input id="signInName" type="text"></input>
    <div class="error itemLevel" aria-hidden="false" style="visibility: hidden;">
        <p>ce courriel est invalide</p>
    </div>
</div>
<div class="child">
    <label for="password">Mot de passe</label>
    <input id="password" type="text"></input>
    <div class="error itemLevel" aria-hidden="false" style="visibility: hidden;">
        <p>Entrez votre mot de passe</p>
    </div>
</div>
<button onclick="showErrors()">Show Errors</button>

或者您可以使用切換元素的類 DOMTokenList.toggle()

function showErrors() {
    document.querySelectorAll('.error.itemLevel').forEach((node) => node.classList.toggle("hidden"));
}

.itemLevel {
  line-height: 32px;
}

.hidden {
  visibility: hidden;
}

<div class="child">
    <label for="signInName">Adresse courriel</label>
    <input id="signInName" type="text"></input>
    <div class="error itemLevel hidden" aria-hidden="false">
        <p>ce courriel est invalide</p>
    </div>
</div>
<div class="child">
    <label for="password">Mot de passe</label>
    <input id="password" type="text"></input>
    <div class="error itemLevel hidden" aria-hidden="false">
        <p>Entrez votre mot de passe</p>
    </div>
</div>
<button onclick="showErrors()">Show Errors</button>

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

標籤：

上一篇：剪刀石頭布宣布獲勝者邏輯