我想要做的是，當用戶點擊搜索按鈕時，搜索欄就會顯示出來。但由于某種原因，它只是不作業，我不知道，為什么？我仔細檢查了
https://www.w3schools.com/jsref/event_onclick.asp只是為了確保我做得對，但無濟于事。我嘗試了 add.eventlistner 那個不起作用，因為它onclick="showBar()"在 JS 中將按鈕視為 null 應該在哪里看到按鈕。
HTML
<button onclick="showBar()" class="btn btn-outline-success" type="submit">
Search
<img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
CSS
.form-control, .me-2 {
animation: slide 1s 1;
}
.me-2 {
display: none !important;
}
JS
let slideSearch = document.querySelector(".me-2");
function showBar() {
slideSearch.style.display = "block";
}
uj5u.com熱心網友回復：
您的問題是您正在使用!importanton display: noneof .me-2。
!important除非你想永久隱藏它，否則你不應該在你的風格中使用它。
let slideSearch = document.querySelector(".me-2");
function showBar() {
slideSearch.style.display = "block";
}.form-control, .me-2 {
animation: slide 1s 1;
}
.me-2 {
display: none; /*Removed !important*/
}<button onclick="showBar()" class="btn btn-outline-success" type="submit">
Search
<img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
<input class="me-2"/>!important如果由于某種原因無法擺脫。您可以嘗試在 Javascript 中添加將在您的 CSS 中覆寫!important的內容。.me-2!important
let slideSearch = document.querySelector(".me-2");
function showBar() {
slideSearch.style.setProperty('display','block','important');
}.form-control, .me-2 {
animation: slide 1s 1;
}
.me-2 {
display: none !important;
}<button onclick="showBar()" class="btn btn-outline-success" type="submit">
Search
<img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
<input class="me-2"/>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486286.html
標籤：javascript