如何在单击时更改 img 大小,并在使用 javascript 切换时将其 return 变为正常?
How do I change img size on click, and return it to normal on toggle using javascript?
我希望 html 文件中的图像大小更改 50%,并在第二次单击时切换回正常大小。我尝试以与 onmouseover 相同的方式进行操作,但它不起作用。在 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%;
}
这是一个使用转换的更简单的示例。只需在点击时切换 class。
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
里面的width/height class。
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"/>
我希望 html 文件中的图像大小更改 50%,并在第二次单击时切换回正常大小。我尝试以与 onmouseover 相同的方式进行操作,但它不起作用。在 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%;
}
这是一个使用转换的更简单的示例。只需在点击时切换 class。
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
里面的width/height class。
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"/>