在没有 img 标签的情况下在 js 中设置图像样式

Question

我的意思是这样的：

document.getElementById("image-div").innerHTML="<img src=''>";

如何在js中改变图片的width/height？我试过了，但什么也没有。正在更改 id（容器），但图像大小仍然相同。

Answer 1

const img = document.getElementById('image-div');
img.style.width = '100px';
img.style.height = '100px';

这是更改图像高度和宽度的方法。为您添加一个 id 并在您的 js

中获取该 id

Answer 2

尝试这样的事情：

document.getElementById("myImg").height = "300";
document.getElementById("myImg").width = "300";

 <img id="myImg" src="https://i.redd.it/31b2ii8hchi31.jpg" width="107" height="98">

Answer 3

我注意到您使用 innerHTML 添加图像而不是现有图像。有多种方法可以实现您的要求。我还没有测试过这些，但我想我会尽力帮助您找到解决方案。

.innerHTML('<img src="src" style="height:10px; width: 10px;">') 正如您所展示的那样。这应该会添加具有所选内联样式的图像。
此解决方案将内联样式添加到通过 javascript 创建的图像元素。

let div = document.getElementById("image-div")

let img = document.createElement('img');

img.src = 'https://extremelycoolimage.com/image.png';

img.style.width = '100px';

img.style.height = '100px';

div.appendChild(img);
此解决方案将 class 样式添加到通过 javascript 创建的图像元素。

let div = document.getElementById("image-div")

let img = document.createElement('img');

img.src = 'https://extremelycoolimage.com/image.png';

img.classList.add("image-class");

div.appendChild(img);

祝你项目顺利。

编辑：我相信您遇到的是调整 CONTAINER 的高度和宽度，但图像元素默认为内联块元素。因此，无论容器的高度/宽度定义如何，图像的宽度和高度（我认为）在附加到容器时都会保持不变。

Styling a image in js without the img tag