使用 Javascript 更改 HTML 图像大小 [重复]答案

【问题标题】：Changing HTML image size with Javascript [duplicate]使用 Javascript 更改 HTML 图像大小 [重复]
【发布时间】：2017-04-19 07:03:03
【问题描述】：

所以我正在尝试创建一个选择菜单来更改图像的大小，但我不知道这段代码有什么问题或如何修复它。

HTML：

<img id="dogpicture" src="dog1.png" alt="dog" height="150" width="150"></img>

<select id="dogsize" name="sizeofdog" onchange="dogsize(this.value);">
    <option value="small"> small </option>
    <option value="default" selected> default </option>
    <option value="big"> big </option>
</select>

JS：

function dogsize(option){
    if (option == "small"){
        document.getElementById('dogpicture').height = "50";
        document.getElementById('dogpicture').width = "50";
    }
    if (option == "default"){
        document.getElementById('dogpicture').height = "100";
        document.getElementById('dogpicture').width = "100";
    }
    if (option == "big"){
        document.getElementById('dogpicture').height = "150";
        document.getElementById('dogpicture').width = "150";
    }
}

【问题讨论】：

你怎么知道错了？
它们应该是数字。不是价值观。删除"。或者如果您要作为字符串发送，请在末尾添加px。
@RadLexus 因为它根本不起作用
您本可以在您的问题中提到这一点。不要使用确切的短语“它根本不起作用”——要明确地说“什么都没有发生，没有错误，屏幕上没有变化”。

标签： javascript html image styling

【解决方案1】：

似乎工作正常。我所做的唯一更改是将 img 标签修复为 void 标签（并且我添加了指向狗图片的链接）。

您是直接更改元素height/width，但您也可以更改样式属性的height/width。

如果有其他代码影响图像或下拉菜单，那么也需要查看。

// original function
function dogsize(option){
    if (option == "small"){
        document.getElementById('dogpicture').height = 50; // string "50" also works
        document.getElementById('dogpicture').width = 50;
    }
    if (option == "default"){
        document.getElementById('dogpicture').height = 100;
        document.getElementById('dogpicture').width = 100;
    }
    if (option == "big"){
        document.getElementById('dogpicture').height = 150;
        document.getElementById('dogpicture').width = 150;
    }
}

// alternate syntax that changes the style attribute properties
function dogsizeStyleMutation(option){
    if (option == "small"){
        document.getElementById('dogpicture').style.height = "50px";
        document.getElementById('dogpicture').style.width = "50px";
    }
    if (option == "default"){
        document.getElementById('dogpicture').style.height = "100px";
        document.getElementById('dogpicture').style.width = "100px";
    }
    if (option == "big"){
        document.getElementById('dogpicture').style.height = "150px";
        document.getElementById('dogpicture').style.width = "150px";
    }
}

<img id="dogpicture" src="https://www.what-dog.net/Images/faces2/scroll0015.jpg" alt="dog" height="150" width="150" />

<br/>
<h3>Changes element height/width</h3>

<select id="dogsize" name="sizeofdog" onchange="dogsize(this.value);">
    <option value="small"> small </option>
    <option value="default" selected> default </option>
    <option value="big"> big </option>
</select>

<br/>
<h3>Changes element style attr height/width</h3>

<select id="dogsizeStyle" name="sizeofdogInStyle" onchange="dogsizeStyleMutation(this.value);">
    <option value="small"> small </option>
    <option value="default" selected> default </option>
    <option value="big"> big </option>
</select>

【讨论】：

那么到底改变了什么？
@Jecoms 我不知道为什么它不起作用，我有另一个函数可以根据另一个选择更改图像本身，也许这就是导致问题的原因？
可能是。您必须考虑与一段 DOM/代码交互的所有位。如果将值设置为数字，height/width 也可以使用，但是诸如“150px”之类的字符串在此 sn-p 中不起作用。可能是浏览器特定的 js 实现问题。