JavaScript使用DOM对 div 添加图片的 2种方式

最新推荐文章于 2024-03-01 11:42:13 发布

原创最新推荐文章于 2024-03-01 11:42:13 发布 · 5.6k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #html #css #dom

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了两种在div中添加图片的有效方法。第一种是通过创建img元素并将其挂载到div上，同时设置图片大小与div一致。第二种是直接设置div的背景图片，并调整其属性以确保图片不重复且完美覆盖div。

div添加图片，以下两种方式亲测有效：

方式1：创建img，将img`挂载`到div上

var d1 = document.getElementById("d1");//获取div元素
var im = document.createElement("img");//创建图片
im.src = "img/1.png";
//图片设置成和div一样大小
im.style.width = d1.style.width;
im.style.height = d1.style.height ;
d1.appendChild(im);	//图片挂载到div上

方式2：给div添加`背景图片`

var d1 = document.getElementById("d1");//获取div元素
d1.style.backgroundImage="url(../day8.17/img/2.PNG)";//设置背景图片
d1.style.backgroundRepeat="no-repeat";//设置图片不重复
d1.style.backgroundSize="cover";//设置图片为平铺(刚好铺满div)