Javascript 如何获取图像src值_Javascript_Html_Attributes_Event Handling

Javascript 如何获取图像src值

javascript html

Javascript 如何获取图像src值,javascript,html,attributes,event-handling,Javascript,Html,Attributes,Event Handling,我想在单击图像时获取图像的src。它位于表列中桌子的结构是什么样的 <html> <body> <div> <table> <tr> <td img src=" xxx "></td> </tr> <tr> <

我想在单击图像时获取图像的src。它位于表列中

桌子的结构是什么样的

   <html>
   <body>
      <div>
         <table>
            <tr>
               <td img src=" xxx "></td>
            </tr>
            <tr>
               <td img src=" xxx "></td>
            </tr>
            <tr>
               <td img src=" xxx "></td>
            </tr>
         </table>
      </div>
   </body>
</html>

请告诉我当我单击图像时获取该图像的src的方法，并且我想将该src发送到另一个html页面。首先，您的html不正确。请这样更正您的html

<table>
    <tr>
      <td> <img src=" xxx " /></td>
    </tr>
    <tr>
      <td> <img src=" xxx " /></td>
    </tr>
    <tr>
      <td> <img src=" xxx " /></td>
    </tr>
</table>

您还需要包括

jquery库

参考。

试试看

const img = document.querySelector('img');

.addEventListener('click', (event) => {
  alert(event.target.getAttribute('src'));
});

代码中几乎没有错误。

img

是一个单独的html标记。不能将其设置为

td

的属性

所以你会像这样

<table>
    <tr>
      <td> <img src=" xxx " /></td>
    </tr>
    <tr>
      <td> <img src=" xxx " /></td>
    </tr>
    <tr>
      <td> <img src=" xxx " /></td>
    </tr>
</table>

HTML

<div>
  <table>
    <tr>
      <td><img src=" xxx ">1</td>
    </tr>
    <tr>
      <td><img src=" xxx2 ">2</td>
    </tr>
    <tr>
      <td><img src=" xxx3 ">3</td>
    </tr>
  </table>
</div>

表格单元格（即）没有有效的属性

img

和

src

，尽管它可能有一个包含

document.addEventListener（'DOMContentLoaded'，_=>{
document.addEventListener（'click'，event=>{
如果（event.target.tagName.toUpperCase（）='TD'）{
document.getElementById（'imgSrc'）。value=event.target.style.backgroundImage.replace（/（url\（“”）\（“\）/g'）；
}
});
});
td{
最小宽度：32px；
线高：32px；
}
单击图像，将其src属性设置为以下文本输入的值：
1.
2.
3.
图像src:
您在JS中尝试过正则表达式吗？td
标记中的img
属性无效…没有有用的问题。通过yourobject.addEventListener（'click'，function（event）{}）
添加一个点击事件，并使用event.target.src或Addonclick=“alert（this.src）”
为每个图像添加一个事件监听器可能会导致内存问题，尤其是当页面有数百个或更多图像时，这可能最终导致浏览器崩溃。此外，如果动态地从DOM中添加和删除图像，这可能会导致内存泄漏。仅返回与选择器匹配的第一个元素（或null），因此仅适用于第一个图像…jQuery实际上在本机上支持事件委派：$（文档）。在（'click'，'img'，function（event）{…谢谢-我已将该资源添加到关于jQuery的段落中
// get all the images
var getAllImages = document.getElementsByTagName('img');
// loop through it
for (var i = 0; i < getAllImages.length; i++) {
  (function(x) {  // closure starts here
    getAllImages[x].addEventListener('click', function() {

      alert(this.getAttribute('src'))
})
  }(i))  // pass the value of i
}