首页 > 软件开发 > JQUERY >

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

来源:互联网 2023-03-17 00:47:03 版权归原作者所有,如有侵权,请联系我们

动态给div标签指定一张图片,使用jquery是比较方便的,本文介绍两种方式:2fB办公区 - 实用经验教程分享!

1)设置div的背景图2fB办公区 - 实用经验教程分享!

2)div内部插入一个图片标签2fB办公区 - 实用经验教程分享!

工具/原料

  • visual studio code

方法/步骤

  • 1

    打开visual studio code,新建如下结构的文件,在vs code中的html页面输入一个感叹号,再按一下Tab键,就可以快速创建H5格式的页面DOM结构2fB办公区 - 实用经验教程分享!

    如何动态给div标签指定一张图片2fB办公区 - 实用经验教程分享!

  • 1该信息未经许可获取自百度经验
  • 2

    在页面上添加一个div,设置高=300px,宽=300px。再添加两个按钮,用于后面演示点击按钮时给div添加图片2fB办公区 - 实用经验教程分享!

    如何动态给div标签指定一张图片2fB办公区 - 实用经验教程分享!

  • 3

    在页面head部分,引入jquery源码,要使用jquery是必须要引入其源文件的2fB办公区 - 实用经验教程分享!

    如何动态给div标签指定一张图片2fB办公区 - 实用经验教程分享!

  • 4

    在页面添加Jquery代码,绑定【添加背景图】按钮的点击事件,动态给div添加背景图2fB办公区 - 实用经验教程分享!

    如何动态给div标签指定一张图片2fB办公区 - 实用经验教程分享!

  • 5

    在浏览器中打开页面,点击【添加背景图】,就可以看到图片的效果2fB办公区 - 实用经验教程分享!

    如何动态给div标签指定一张图片2fB办公区 - 实用经验教程分享!

  • 6

    在页面添加Jquery代码,绑定【添加img标签】按钮的点击事件,动态给div插入一个img标签,显示图片2fB办公区 - 实用经验教程分享!

    如何动态给div标签指定一张图片2fB办公区 - 实用经验教程分享!

  • 7

    在浏览器中运行,效果如下2fB办公区 - 实用经验教程分享!

    如何动态给div标签指定一张图片2fB办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!2fB办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号