javascript - 使用 JavaScript 设置 HTML 按钮图像

Question

我正在制作我的第一个网站，我想创建一个 HTML 按钮并在上面放一张图片。

但是图像的尺寸不对，我正在寻找一种在将图像放在按钮上之前缩放图像的方法。我就是这样尝试的:

function setImg(){
   var img = new Image(200,200);
   img.src = "imgs/youtubeImg.png";
   img.style.width = 100;
   img.style.height = 100;
   document.getElementById("youtubeButton").style.backgroundImage = img;
}

我不知道为什么它不起作用。我不知道这是否重要，但这个函数是在创建按钮后调用的。 希望你能帮助我，谢谢。

编辑: 方法:附加子:

这就是那个函数的样子

但我想让 img 适合这个按钮:

但这只有在图像是按钮的背景图像时才有效。

Answer 1

请试试这个，

使用 appendChild() 添加图像。

function setImg(e){
   e.classList.add("active")
   var img = new Image(200,200);
   img.src = "https://images.unsplash.com/photo-1530103043960-ef38714abb15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";
   img.style.width = "180px";
   img.style.height = "70px";
   document.getElementById("youtubeButton").textContent= "";
   document.getElementById("youtubeButton").appendChild(img);

}

button{
  padding:20px 30px;
}
button.active{
  padding:0;
  margin:0;
}

<button id="youtubeButton" onclick="setImg(this)">Youtube Button</button>