Question

我需要打开一个弹出窗口，点击一个图像，让用户给出该特定图像的尺寸。这样图像将相应地创建给定的高度和宽度值。我搜索了很多但找不到开始的方法。任何的想法？？：）

由于

Answer 1

我不确定你在追求什么。因此，处理我的想象力！

点击图片，然后在提示窗口中输入 WIDTHxHEIGHT 格式的值，以查看正在调整大小的图片。

document.querySelector("img").addEventListener("click", function() {

    var dims = prompt("Enter image dimensions", "100x100");
    
    if (!/^\d{2,}x\d{2,}$/i.test(dims)) {
        alert ("Invalid format!");
        return;
    }

    this.width = dims.split('x')[0] || 'auto';
    this.height = dims.split('x')[1] || 'auto';
});

<img src="http://butterfly-conservation.org/files/peacock-matt-berry.jpg" />

以及jQuery解决方案，以防万一：

$("img").on("click", function() {

    var dims = prompt("Enter image dimensions", "100x100");

    if (!/^\d{2,}x\d{2,}$/i.test(dims)) {
        alert ("Invalid format!")
    }

    $(this).css({
        width: dims.split('x')[0] || 'auto',
        height: dims.split('x')[1] || 'auto'
    });
});

onclick打开一个弹出窗口并指定图像的尺寸以创建它

1 个答案: