用Java脚本设置HTML按钮图像

问题描述

我正在第一个网站上工作，我想创建一个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;
}

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

编辑：方法：appendChild：

那就是那个函数的样子

但是我想让img适合这个按钮：

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

编辑2：我找到了解决方案。您只需设置背景大小即可自动缩放图像。

解决方法

请改用此方法

使用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>

如果您是通过CSS设置背景图片（而不是仅将其附加到按钮上，而您也可以这样做），则需要设置background-size属性，以获取详细信息

html htmlbutton javascript