如何调整JavaScript代码中使用的图片尺寸及位置？

方法一：直接修改HTML标签（最简单） #

直接把你需要的尺寸和位置属性加到<input type="image">标签里即可，不需要改动JavaScript代码：

<div>
    <script>
        var audio = new Audio("https://files.catbox.moe/23r8yv.mp3");
        audio.oncanplaythrough = function ( ) { }
        audio.onended = function ( ) { }
     </script>
    <input type="image" 
           src="https://felizcumpleanos.neocities.org/cosas%20para%20cumplea%C3%B1os/mewo%20fondo%20mimi.png" 
           onclick="audio.play()"
           width="300" 
           height="210" 
           style="margin-left: 1300px;">
</div>  

方法二：用JavaScript设置样式 #

如果一定要通过JavaScript实现，可以给图片按钮添加一个id，然后在脚本里获取元素并设置样式：

<div>
    <script>
        var audio = new Audio("https://files.catbox.moe/23r8yv.mp3");
        audio.oncanplaythrough = function ( ) { }
        audio.onended = function ( ) { }
        
        // 页面加载完成后设置图片的尺寸和位置
        window.onload = function() {
            var playBtn = document.getElementById("playButton");
            playBtn.width = 300;
            playBtn.height = 210;
            playBtn.style.marginLeft = "1300px";
        }
     </script>
    <input id="playButton" type="image" 
           src="https://felizcumpleanos.neocities.org/cosas%20para%20cumplea%C3%B1os/mewo%20fondo%20mimi.png" 
           onclick="audio.play()">
</div>  

两种方法都能实现你要的效果，方法一更简单直接，适合技术基础薄弱的场景。

内容的提问来源于stack exchange，提问作者zzzymbiosis