用Javascript更改HTML圖像大小

Question

所以我正在嘗試創建一個用於更改圖像大小的選擇菜單，但我不知道這段代碼有什麼問題或者如何解決此問題。

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"; 
    } 
} 

Answer 1

似乎是工作的罰款。我做的唯一更改是將img標記修復爲無效標記（並且我包含鏈接到狗圖片）。

您直接更改元素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>