如何动态给div标签指定一张图片

动态给div标签指定一张图片, 利用jquery是比力便利的, 本文介绍两种体例:
1)设置div的布景图
2)div内部插入一个图片标签

需要这些哦
visual studio code
方式/
1打开visual studio code, 新建如下布局的文件, 在vs code中的html页面输入一个感慨号, 再按一下Tab键, 就可以快速建立H5格局的页面DOM布局

如何动态给div标签指定一张图片

文章插图

2在页面上添加一个div, 设置高=300px, 宽=300px 。 再添加两个按钮, 用于后面演示点击按钮时给div添加图片

如何动态给div标签指定一张图片

文章插图

3在页面head部门, 引入jquery源码, 要利用jquery是必需要引入其源文件的

如何动态给div标签指定一张图片

文章插图

4在页面添加Jquery代码, 绑定【添加布景图】按钮的点击事务, 动态给div添加布景图

如何动态给div标签指定一张图片

文章插图

5在浏览器中打开页面, 点击【添加布景图】, 就可以看到图片的结果

如何动态给div标签指定一张图片

文章插图

6在页面添加Jquery代码, 绑定【添加img标签】按钮的点击事务, 动态给div插入一个img标签, 显示图片

如何动态给div标签指定一张图片

文章插图

7【如何动态给div标签指定一张图片】在浏览器中运行, 结果如下

如何动态给div标签指定一张图片

文章插图


以上内容就是如何动态给div标签指定一张图片的内容啦, 希望对你有所帮助哦!

    推荐阅读