首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >点击图片后放大

点击图片后放大
EN

Stack Overflow用户
提问于 2022-09-06 12:57:58
回答 1查看 107关注 0票数 0

我需要放大一张图片当我点击它。问题是,我从我的数据库中获得了这个图像,我不知道如何在点击后改变图片的大小。

以下是使用数据创建图片的js函数

代码语言:javascript
运行
复制
function loadSynthese(data) {
$.ajax({
    cache: false,
    url: "data/loadSynthese",
    type: "POST",
    async: true,
    data: ({
        dateid: data,
    }),
    success: function (response, status) {

            response.forEach(element => {
                css = "";
                idonglet = element["id_onglet"];
                idprio = element["id_prio"];
                texte = element["texte"];
                image = element["image_aide"];
                
                
                if(image === '' || image === null || image === undefined){
                    htmlPrio = '<div class="intPrio"><p class="titreP">Priorité ' + k + '' + pilote + '</p><img id="' + idonglet + 'imgCheck' + idprio + '" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" ' + css + ' alt="Sélectionner la priorité" data-idprio="' + idprio + '"></div><label class="textPrioSynth" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" data-idprio="' + idprio + '">' + texte + '</label>';
                } else {
                    img = '</br><img id="image'+ idprio + '" class="imageP" src="data:image/jpeg;base64,' + btoa(image) +'">';
                    htmlPrio = '<div class="intPrio"><p class="titreP">Priorité ' + k + '' + pilote + '</p><img id="' + idonglet + 'imgCheck' + idprio + '" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" ' + css + ' alt="Sélectionner la priorité" data-idprio="' + idprio + '"></div><label class="textPrioSynth" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" data-idprio="' + idprio + '">' + texte + '<p class="imageP" onclick="enlargeImg()">' +img+'</p></label>';
                }
                $("#" + idonglet + "ps").append(htmlPrio);

                
                ((nextid == idonglet) ? k++ : k = 1);
                j++; i++;
                ((j < response.length - 1) ? nextid = response[i]['id_onglet'] : "");

            });
        }

    },
    error: function (response, status) {
    }
});}

在这里,我想添加一个函数来改变图片的大小。

代码语言:javascript
运行
复制
function enlargeImg(img) {
    img.style.width = "60%";
    img.style.height = "auto";
    img.style.transition = "width 0.5s ease";}

当我点击图片时,我有一个问题:"Uncaught :无法读取未定义的属性(读取‘样式’)“。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-06 13:02:38

可以添加或删除具有some-name的css类transform:scale(1.5),而img具有transition: 0.5s

代码语言:javascript
运行
复制
img {
  transition: 0.5s;
}

img:hover,
.some-class {
  transform: scale(1.5)
}
代码语言:javascript
运行
复制
<img src="https://picsum.photos/200" style="margin:40px">

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73622463

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档