Question

地狱，

我有下面的 html 代码：

<div class="row">
    
    <button id="dog-btn">Show Dog</button>
    <br>
</div>


<div id="pets">
</div>

我想要一些简单的代码，使用 JS 来检查宠物 div 是否可见。如果是，则 dog-btn 的内部文本应为 Hide Dog。如果不可见，则应显示为 Show Dog。

告诉我！

Answer 1

您可以通过使用 .style.display() DOM 方法来获得它。

HTML

<div class="row">

  <button id="dog-btn" onclick="showDog()">Show Dog</button>
  <br>
</div>

狗 JS

document.getElementById("pets").style.display = "none";
function showDog() {
  
   var petDiv = document.getElementById("pets");
   var petBtn = document.getElementById("dog-btn");
   if (petDiv.style.display == "none") {
      petBtn.innerHTML = "Hide Dog";
      petDiv.style.display = "block"
   }
   else {
      petBtn.innerHTML = "Show Dog";
      petDiv.style.display = "none"
   }
}

Answer 2

@DemoNemo5 的回答从技术上讲可以满足您的问题，但我假设您想要一个可以切换隐藏和显示的按钮。此外，每当运行该段代码时，上一个答案只会更改一次按钮。

function togglePets(){
    if(document.getElementById("pets").style.display != "none"){
        document.getElementById("dog-btn").innerHTML = "Show Dog";
        document.getElementById("pets").style.display = "none";
        console.log("hide")
    } else {
        document.getElementById("dog-btn").innerHTML = "Hide Dog";
        document.getElementById("pets").style.display = "block";
        console.log("show")   
    }
}

<div class="row">
    
    <button id="dog-btn" onclick="togglePets()">Hide Dog</button>
    <br>
</div>


<div id="pets">
    stuff 
</div>

我们创建了一个函数，每次单击按钮时都会调用该函数，该函数检查 style.display 是否为 none（这意味着它被隐藏）并更改按钮的文本并切换宠物 div 的显示

Answer 3

const dog_btn = document.querySelector("#dog-btn");
const pets = document.querySelector("#pets");

dog_btn.addEventListener("click", ()=> {
  pets.style.display = pets.style.display !== "none" ? "none" : "initial";
  dog_btn.innerText = pets.style.display !== "none" ? "Hide Dog" : "Show Dog";
});

<div class="row">
    
    <button id="dog-btn">Hide Dog</button>
    <br>
</div>


<div id="pets">
Something
</div>

Answer 4

您可以使用 document.getElementById() 获取 div 以访问其样式。此代码假定您正在切换 CSS display 属性。

if(document.getElementById("pets").style.display == "none"){
document.getElementById("dog-btn").innerHTML = "Show Dog";
} else {
document.getElementById("dog-btn").innerHTML = "Hide Dog";
}

<div class="row">
    
    <button id="dog-btn">Show Dog</button>
    <br>
</div>


<div id="pets">
</div>

如果 div 可见，则更改内部文本的状态

4 个答案: