js实现点击图片放大，再次点击还原图片功能

---

前言

项目开发过程中遇到一个小的功能性需求，客户要求实现点击图片放大进行查看的功能，再次点击还原图片大小。

展示图片列表数据

代码如下（示例）：

formatter: function(value, row, index) {
    return '<img src="' + row.certAddress1 + '" onclick="toggleImageSize(this);" style="width: 1in; height: 1in;">';
}

 js方法

function toggleImageSize(image) {
    if (image.style.width === "1in") {
        image.style.width = "";
        image.style.height = "";
    } else {
        image.style.width = "1in";
        image.style.height = "1in";
    }
}

这样，当用户点击图片时，将调用toggleImageSize函数来切换图片的大小。如果图片当前大小为"1in"，则设置为默认大小；否则，将图片大小设置为"1in"。这样就可以实现点击图片放大和还原功能。

点击放大，实现效果截图：

再次点击就能还原啦

总结

写一个function根据原固定尺寸进行if-else判断是否展示原始大小