javascript - 如何使用 JavaScript 更改 CSS 显示属性?
问题描述
我无法更改 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 文件!)
解决方案
您必须首先通过 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>
推荐阅读
- python - 使用If语句在pandas Python中复制行
- java - 无法将 org.json.JSONObject 类的值转换为 org.apache.kafka.common.serialization.StringSerializer/JsonSerializer 类
- github - 如何防止对 main 的提交部署在 vercel 上
- r - 在 Shiny 中连接日历和文本输入
- kernel - 如何在 Windows 上以编程方式(IDebugClient)从转储文件中获取进程名称
- python - VSC 虚拟环境点子列表问题
- php - 从控制器下载后的 csv 文件名不正确
- c# - 持久实体的“对象引用未设置为对象的实例”错误
- python - `type` 无法识别第一个参数(CPython)
- visual-studio-code - 未找到 vs 代码命令“extension.insertColonOrSemiColon”