如何通過單擊按鈕顯示隱藏文本？-有解無憂

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display = "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<ul>
  <li><button onclick="myFunction()">Try it</button>
    <div id="myDIV"><p>This is my DIV element.</p></div 
  </li>
</ul>

在 css 檔案中，我包含了命令：#myDIV{ display: none; 因為否則一開始文本不會被隱藏。使用此代碼，文本首先被隱藏，如果我單擊按鈕，它會顯示文本。但是，如果我再次單擊該按鈕，它應該關閉它沒有關閉的文本。有人可以幫我嗎？謝謝！

uj5u.com熱心網友回復：

將此設定為 HTML

<div id="myDIV" style="display: none;"><p>This is my DIV element.</p></div>

和這個 javascript

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display == "none") {
        x.style.display = "block";
    } else {
       x.style.display = "none";
      }
}

這現在將起作用，因為 display none 默認情況下不是 div 元素，因此 javascript 將看不到 display none 樣式并且不會執行該功能。所以你需要指定 style display none 并且該功能將正常作業

uj5u.com熱心網友回復：

=是賦值。==并且===是比較。所以在里面if，把它改成這兩個之一。

您也沒有正確關閉<div>您提交的代碼中的。

另一件事是您display: none在 CSS 檔案中設定了。JavaScript 無法訪問此值，它只能訪問style="..."元素的 HTML 標記。要解決此問題，請檢查它是否未隱藏并在if/else塊的兩側交換。

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display == "block") { // `=` to `==` or `===`
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

#myDIV {
  display: none;
}

<ul>
  <li><button onclick="myFunction()">Try it</button>
    <div id="myDIV">
      <p>This is my DIV element.</p>
    </div> <!-- this div wasn't closed properly -->
  </li>
</ul>

uj5u.com熱心網友回復：

function myFunction() {
  var x = document.getElementById("myDIV");
  x.style.display = x.style.display != "block"?"block":"none"
}

#myDIV{ display: none; }

<ul>
  <li><button onclick="myFunction()">Try it</button>
    <div id="myDIV"><p>This is my DIV element.</p></div 
  </li>
</ul>

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

標籤：javascript html css

上一篇：如何將字串型別的兩位小數相乘javascript

下一篇：在陣列上回圈時減少鍵入腳本錯誤