[英]Show div onclick not working (Javascript)
Javascript 新手在這里。 任何人都可以讓我知道我的代碼有什么問題嗎？ 單擊后不顯示 div-to-show，我不知道為什么...
let div = document.getElementById('div-to-show'); function openDiv() { if (div.style.display === 'none') { div.style.display = 'block'; } }
#div-to-show { display: none; }
<p onclick="openDiv">Clique</p> <div id="div-to-show"> <p>I am visible</p> </div>
這里有2個問題。
首先，您沒有使用onclick="openDiv"調用函數 - 您必須在函數名稱之后放置()才能調用它，例如onclick="openDiv()" 。
其次，盡管您有一個 CSS 規則display: none ，但這不會導致元素本身的 CSS 屬性發生變化； 它仍然是空字符串：
let div = document.getElementById('div-to-show'); function openDiv() { console.log(div.style.display); }
#div-to-show { display: none; }
<p onclick="openDiv()">Clique</p> <div id="div-to-show"> <p>I am visible</p> </div>
相反，要檢查元素是否正在顯示，您可以檢查其offsetParent是否為 null：
let div = document.getElementById('div-to-show'); function openDiv() { div.style.display = div.offsetParent === null ? 'block' : 'none'; }
#div-to-show { display: none; }
<p onclick="openDiv()">Clique</p> <div id="div-to-show"> <p>I am visible</p> </div>
對於檢查將哪些 CSS 規則應用於特定元素的一般情況，您可以使用getComputedStyle ：
let div = document.getElementById('div-to-show'); const styleProp = div.style; const styleDec = window.getComputedStyle(div); function openDiv() { styleProp.display = styleDec.display === 'none' ? 'block' : 'none'; }
#div-to-show { display: none; }
<p onclick="openDiv()">Clique</p> <div id="div-to-show"> <p>I am visible</p> </div>
onclick正確提及函數名稱。 onclick=openDiv應該替換為onclick=openDiv() 。display css 樣式，以在 javascript 上獲取div.style.display 。 document.getElementById('...').style將只包含定義在 html 標簽style屬性上的style屬性，以便進行比較，需要直接在 html 文件上設置display屬性。 let div = document.getElementById('div-to-show'); function openDiv() { if (div.style.display === 'none') { div.style.display = 'block'; } }
<p onclick="openDiv()">Clique</p> <div id="div-to-show" style="display: none;"> <p>I am visible</p> </div>
<!DOCTYPE html> <html> <head> <style> #div-to-show{ display: none; } </style> </head> <body> <p onclick="openDiv()">Clique</p> <div id="div-to-show"> <p>I am visible</p> </div> <script type="text/javascript"> let div = document.getElementById('div-to-show'); function openDiv(){ if(window.getComputedStyle(div).display === 'none'){ div.style.display = 'block'; } } </script> </body> </html>
在您的代碼中，您在此標簽中編寫 onclick 的方式是錯誤的<p> ，您需要以這種方式編寫 onclick ：
<p onclick="openDiv()">Clique</p>
然后再試一次。
嗨，正如這里的其他一些示例所解釋的那樣，您應該使用 addEvenlListener。 如果您只在單擊事件上顯示 div 的內容，則不需要 if 語句。 您可以向設置 display:none 的 div 添加一個類。 然后在代碼中你只需要在 div 上的 classList 上調用 remove 。 如果類不在 classList 中，這不會引發錯誤或執行任何操作。 所以不需要實現任何檢查邏輯。
使用隱藏類使您無需知道最初在 div 元素上的顯示值是什么。 少擔心。
https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove
let div = document.getElementById('div-to-show') document.getElementById('p-button').addEventListener("click", openDiv); function openDiv() { div.classList.remove('hidden'); }
#div-to-show.hidden { display: none; }
<p id="p-button">Clique</p> <div id="div-to-show" class="hidden"> <p>I am visible</p> </div>
Javascript不適用於：onclick顯示textarea中的隱藏div
[英]Javascript not working for: onclick show hidden div from textarea
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.