我希望 html 檔案中的影像大小更改 50%，并在第二次單擊時切換回正常大小。我嘗試以與 onm ouseover 相同的方式執行此操作，但它不起作用。有沒有人對如何在 javascript 中做到這一點有任何想法？
html代碼-
<article id="featuredartists">
<h2>Featured Artists</h2>
<div class="artistlist group">
<ul class="group">
<li><img src="images/artists/Barot_Bellingham_tn.jpg" alt="Photo of Barot Bellingham" onclick="func3()"></li>
</ul>
</div>
</article>
外部javascript -
function func3() {
x = document.getElementsByTagName("img")[11];
x.height = 50%;
x.width = 50%;
}
uj5u.com熱心網友回復：
這是一個使用轉換的更簡單的示例。只需在點擊時切換一個類。
document.querySelector("img").addEventListener("click", function(){
this.classList.toggle("half");
});img
{
transition-duration: 0.4s;
}
img.half
{
transform: scale(0.5);
}<img src="https://via.placeholder.com/100x100"/>如果你真的希望它改變元素和流的大小，那么你可以改變.half類內的寬度/高度。
顯示代碼片段
document.querySelector("img").addEventListener("click", function(){
this.classList.toggle("half");
});img
{
transition-duration: 0.4s;
width: 100px;
height: 100px;
}
img.half
{
width: 50px;
height: 50px;
}<img src="https://via.placeholder.com/100x100"/>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326580.html
標籤：javascript html css 切换 按标记名获取元素
上一篇：按鈕未對齊
下一篇：字體大小根據手機字體大小設定放大