我需要放大一张图片当我点击它。问题是,我从我的数据库中获得了这个图像,我不知道如何在点击后改变图片的大小。
以下是使用数据创建图片的js函数
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) {
}
});}
在这里,我想添加一个函数来改变图片的大小。
function enlargeImg(img) {
img.style.width = "60%";
img.style.height = "auto";
img.style.transition = "width 0.5s ease";}
当我点击图片时,我有一个问题:"Uncaught :无法读取未定义的属性(读取‘样式’)“。
发布于 2022-09-06 13:02:38
可以添加或删除具有some-name
的css类transform:scale(1.5)
,而img具有transition: 0.5s
。
img {
transition: 0.5s;
}
img:hover,
.some-class {
transform: scale(1.5)
}
<img src="https://picsum.photos/200" style="margin:40px">
https://stackoverflow.com/questions/73622463
复制相似问题