我想當我點擊一個句子或一個按鈕時會出現一個影像，當我再次點擊它時它會消失。但我的代碼似乎不適用于 JS 和 HTML。
let pic = document.getElementById("hiddenclickimg");
let word = document.getElementById("hiddenclick");
function showPic(){
pic.hidden = 'false' ;
word.style.color = 'red';
word.style.backgroundColor = 'blue';
}
word.onclick = showPic;<h3 id="Work">Work Experience</h3>
<div class="work">
<ul>
<li>
<img
src="./Images/Alex Sydney.jpg"
alt="alex sydney"
id="hiddenclickimg"
hidden="true"
/>
<button id="hiddenclick">Alex Sydney Hospital</button>
</li>
</ul>
</div>
<script src="./main.js"></script>uj5u.com熱心網友回復：
您可以使用按鈕的 onclick 并切換具有該類時隱藏影像的類。
HTML：
<button onclick="imageClick()">Toggle Image</button>
CSS：
.hidden {
opacity: 0;
}
Javascript：
const image = document.getElementById('hiddenclickimg');
const imageClick = () => {
image.classList.toggle('hidden');
}
您可以使用不同的 CSS 屬性來隱藏影像，但 opacity 是一個很好的基本屬性。
uj5u.com熱心網友回復：
您無需設定 2 個 id 即可使用 css 屬性display none來完成這項作業。
例如，您想隱藏該影像：
<img id="dog_image" src="dog.png" alt="Rex the Labradoodle" >
function hideDog() {
const dog = document.getElementById("dog_image");
if (dog.style.display === "none") {
dog.style.display = "block";
} else {
dog.style.display = "none";
}
}
然后只需設定按鈕：
<button onclick="hideDog()">Hide/Show my dog</button>
uj5u.com熱心網友回復：
您可以使用標志來更改影像的狀態，如下所示
let imagehidden =false
let pic = document.getElementById('hiddenclickimg');
let word = document.getElementById('hiddenclick');
function showPic(){
if(imagehidden){
pic.hidden = false ;
word.style.color = 'red';
word.style.backgroundColor = 'blue';
imagehidden=false
}
else{
pic.hidden =true;
imagehidden=true
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454949.html
標籤：javascript html css
上一篇：取決于設備型別的HTML重定向