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

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

我解决了！

  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");

        }   

    }

Answer 2

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

<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>

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