Question

我无法更改img标签的显示属性。

我已将显示更改为内联或阻止。

function toggle_btn_img() {

  let btnId = document.getElementById("btn");
  let avatarId = document.getElementById("avatar");

  if (btnId.innerHTML === "Show!") {
    avatarId.style.display = "block";
    btnId.innerHTML = "Hide!";
  } else {
    avatarId.style.display = "none";
    btnId.innerHTML = "Show!";
  }
}

<div class="w3-display-container w3-card w3-col s4 w3-display-middle w3-light-gray" style="height: 30%;">
  <div class="w3-display-right w3-col s6 w3-display-container">
    <button id="btn" onclick="toggle_btn_img()" class="w3-btn w3-card w3-round w3-light-green w3-hover-green w3-text-white w3-text-hover-gray w3-display-middle w3-col s4">Show!</button>
  </div>
  <div class="w3-display-left w3-dispaly-container w3-col s6">
    <div id="avatar_container" class="w3-card w3-circle w3-display-middle w3-pale-blue" style="height: 150px; width: 150px;"><img id="avatar" src='http://placekitten.com/200/300' class="w3-hide w3-col s11 w3-display-middle" /></div>
  </div>
</div>

我希望图像可以显示和隐藏，但事实并非如此。（我不能更改html或css文件！）

Answer 1

首先，您必须通过CSS oder JS将其隐藏，否则第一次单击该按钮将没有任何效果。完成此操作后，您将获得预期的结果：

let btnId = document.getElementById("btn");
let avatarId = document.getElementById("avatar");            
avatarId.style.display = "none";

function toggle_btn_img() {

    if (btnId.innerHTML === "Show!") {
        avatarId.style.display = "block";
        btnId.innerHTML = "Hide!";
    } else {
        avatarId.style.display = "none";
        btnId.innerHTML = "Show!";
    }   
}

#avatar {
  display: none;
}

<div class="w3-display-container w3-card w3-col s4 w3-display-middle w3-light-gray" style="height: 30%;">
    <div class="w3-display-right w3-col s6 w3-display-container">
        <button id="btn" onclick="toggle_btn_img()" class="w3-btn w3-card w3-round w3-light-green w3-hover-green w3-text-white w3-text-hover-gray w3-display-middle w3-col s4">Show!</button>
    </div>
    <div class="w3-display-left w3-dispaly-container w3-col s6" >
        <div id="avatar_container" class="w3-card w3-circle w3-display-middle w3-pale-blue" style="height: 150px; width: 150px;"><img id="avatar" src='//placekitten.com/200/300' class="w3-hide w3-col s11 w3-display-middle"/></div>
    </div>
</div>

Answer 2

只需添加图片即可一开始不显示

<img style="display:none" src="imgae.jpeg" />

Answer 3

我认为您的代码是正确的。只是演示错误。

<button id="btn" onclick="toggle_btn_img()" class="w3-btn w3-card w3-round w3-light-green w3-hover-green w3-text-white w3-text-hover-gray w3-display-middle w3-col s4">Hide!</button>

我改变了表演！ =>隐藏！（按钮文字）

Answer 4

我解决了这个问题！

  function toggle_btn_img() {
        let btnId = document.getElementById("btn");
        let avatarId = document.getElementById("avatar");
    
        if (btnId.innerHTML.trim() === "Show!") {
            btnId.innerHTML = "Hide!";
            avatarId.style.setProperty("display", "inline-block","important");
        } else {
            btnId.innerHTML = "Show!";
            avatarId.style.setProperty("display", "none","important");
        }   
    }

如何使用JavaScript更改CSS显示属性？

4 个答案: