首页 > 软件开发 > JavaScript >

怎么获取li标签里多个img的src的值

来源:互联网 2023-03-16 23:58:21 303

要获取li标签里多个img的src的值,可以通过javascript脚本来实现。下面,小编就通过一个实例来展示如何获取li标签里多个img的src值,希望能对大家有所帮助。djt办公区 - 实用经验教程分享!

怎么获取li标签里多个img的src的值djt办公区 - 实用经验教程分享!

建立模拟环境

  • 1

    打开记事本djt办公区 - 实用经验教程分享!

    为便于讲解,我们先来搭建一个模拟环境:同时按下win R组合键,在打开的“运行”对话框中,输入notepad回车,打开记事本窗口。djt办公区 - 实用经验教程分享!

    怎么获取li标签里多个img的src的值djt办公区 - 实用经验教程分享!

  • 1该信息非法爬取自百度经验
  • 2

    生成网页文件djt办公区 - 实用经验教程分享!

    在记事本中,复制粘贴以下代码。依次点击菜单“文件”——“保存”,在打开的另存为对话框中,文件名输入“index.html”,保存类型选择“所有文件”,编码为“utf-8”。djt办公区 - 实用经验教程分享!

    html>djt办公区 - 实用经验教程分享!

    head>djt办公区 - 实用经验教程分享!

    meta charset="utf-8">djt办公区 - 实用经验教程分享!

    title>获取图片src/title>djt办公区 - 实用经验教程分享!

    /head>djt办公区 - 实用经验教程分享!

    body>djt办公区 - 实用经验教程分享!

    ul id="myul">djt办公区 - 实用经验教程分享!

    li>img src=1.jpg>/li>djt办公区 - 实用经验教程分享!

    li>img src=2.jpg>/li>djt办公区 - 实用经验教程分享!

    li>img src=3.jpg>/li>djt办公区 - 实用经验教程分享!

    /ul>djt办公区 - 实用经验教程分享!

    /body>djt办公区 - 实用经验教程分享!

    /html>djt办公区 - 实用经验教程分享!

    怎么获取li标签里多个img的src的值djt办公区 - 实用经验教程分享!

  • 3

    预览网页效果djt办公区 - 实用经验教程分享!

    双击打开刚保存的index.html网页,效果如下图所示:djt办公区 - 实用经验教程分享!

    模拟环境至此搭建完成。完成来要获取三个img的src值。djt办公区 - 实用经验教程分享!

    怎么获取li标签里多个img的src的值djt办公区 - 实用经验教程分享!

  • 获取图像的src

  • 1

    获取图像个数djt办公区 - 实用经验教程分享!

    因为要获取li里面所有图像src值,所以我们先来获取图像的个数。可以在/body>标签后面加入以下代码:djt办公区 - 实用经验教程分享!

    script language=javascript>djt办公区 - 实用经验教程分享!

    var len;djt办公区 - 实用经验教程分享!

    len=document.getElementById('myul').getElementsByTagName('img').length;djt办公区 - 实用经验教程分享!

    alert(len);djt办公区 - 实用经验教程分享!

    /script>djt办公区 - 实用经验教程分享!

    这里定义了一个len变量,用来保存图像的个数,并使用alert函数,将得到的结果通过提示框弹出,以便于观察验证获取的数量是否正确。保存后,刷新网页运行效果如下:djt办公区 - 实用经验教程分享!

    怎么获取li标签里多个img的src的值djt办公区 - 实用经验教程分享!

  • 2

    遍历获取图像srcdjt办公区 - 实用经验教程分享!

    通过运行效果,我们可以得出上面的代码是正确的结论。djt办公区 - 实用经验教程分享!

    下面,我们再通过for循环和对象数组来获取所有图像的src值。修改代码如下:djt办公区 - 实用经验教程分享!

    script language=javascript>djt办公区 - 实用经验教程分享!

    var len;djt办公区 - 实用经验教程分享!

    len=document.getElementById('myul').getElementsByTagName('img').length;djt办公区 - 实用经验教程分享!

    djt办公区 - 实用经验教程分享!

    for (var i=0;ilen;i )djt办公区 - 实用经验教程分享!

    {djt办公区 - 实用经验教程分享!

    alert("第" (i 1) "个图像的src值为:" document.getElementById('myul').getElementsByTagName('img')[i].src);djt办公区 - 实用经验教程分享!

    }djt办公区 - 实用经验教程分享!

    /script>djt办公区 - 实用经验教程分享!

    通过for循环对ul标签中的所有img对象进行逐一遍历,获取img对象的src,并通过alert函数弹出提示,以进行结果验证。修改后刷新网页,运行效果如下:djt办公区 - 实用经验教程分享!

    怎么获取li标签里多个img的src的值djt办公区 - 实用经验教程分享!

  • 3

    自我完善代码djt办公区 - 实用经验教程分享!

    上面的方法可以获取li标签中所有图像的src,不管一个Li标签中有一个还是多个图像,都可获取。这个网页的代码并不完美,这里主要只是给大家一个解决问题的思路,大家可以根据这个思路去进行改进,来完善自己的代码,做出更加满意的作品。djt办公区 - 实用经验教程分享!

    怎么获取li标签里多个img的src的值djt办公区 - 实用经验教程分享!

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


    标签: HTMLJAVASCRIPT

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