如何获得图像SRC值

我想在单击图像时获得图像的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页面

您的代码中几乎没有错误。 img是一个单独的HTML标签。您不能将其设置为td的属性。

所以您的html会像这样

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>

要获得src值，您可以使用getElementsByTagName，它将为您提供所有图像的集合。

然后循环遍历它，然后在closure中添加addEventListener。您也可以使用getAttribute获取标签的任何属性

// 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
}

demo

尝试

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

首先，您的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>

并获取image的src单击使用此

$(function () {
  $("img").click(function () {
    var src = $(this).attr("src");
    window.location = "yourpage.html?src=" + src;
   });
});

您还需要包括jquery library参考。

表单元格（即<td>）没有有效的属性img和src，尽管它可以具有包含background-image的style属性。

document.addEventListener('DOMContentLoaded', _ => {
  document.addEventListener('click', event => {
    if (event.target.tagName.toUpperCase() == 'TD') {
      document.getElementById('imgSrc').value = event.target.style.backgroundImage.replace(/(url(")|("))/g, '');
    }
  });
});

td {
  min-width: 32px;
  line-height: 32px;
}

<div>Click on an image to have its src attribute set as the value of the text input below:
  <table>
    <tr>
      <td style="background-image: url('https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon')">
       1
      </td>
    </tr>
    <tr>
      <td style="background-image: url('https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon')">
       2
      </td>
    </tr>
    <tr>
      <td style="background-image: url('https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=32&d=identicon')">
        3
      </td>
    </tr>
  </table>
  Image src:
  <div><input type="text" id="imgSrc" size="80" readonly /></div>
</div>

一种更常见的方法是使用 src 属性的<img>标签。

回答您的问题：

在我单击图像时，告诉我一种获取该图像的SRC的方法，我也想将SRC发送到另一个HTML页面

使用JavaScript-，我推荐了一种称为事件委托的技术。将事件处理程序绑定为使用with document.addeventlistener（）单击事件的事件处理程序与事件 domcontentloaded （要知道何时加载页面），然后观察单击文档上的单个回调，如下面的示例。这样，整个页面只有一个事件侦听器，而不是每个图像一个，这可能会导致内存渗透。）。

document.addEventListener('DOMContentLoaded', _ => {
  document.addEventListener('click', event => {
    if (event.target.tagName.toUpperCase() == 'IMG') {
      document.getElementById('imgSrc').value = event.target.src;
    }
  });
});

<div>Click on an image to have its src attribute set as the value of the text input below:
  <table>
    <tr>
      <td>
       1 <img src=" https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon " />
      </td>
    </tr>
    <tr>
      <td>
       2 <img src="https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon" />
      </td>
    </tr>
    <tr>
      <td>
        3 <img src="https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=32&d=identicon" />
      </td>
    </tr>
  </table>
  Image src:
  <input type="text" id="imgSrc" size="75" />
</div>

如果您使用jQuery之类的JavaScript库，则可以简化代码，例如在下面的示例中使用.dready（），.val（）等。）方法）也可能有用。

$(_ => {
  $(document).click(event => {
    if (event.target.tagName.toUpperCase() === 'IMG') {
       $('#imgSrc').val(event.target.src);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <table>
    <tr>
      <td>
        1 <img src=" https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon" />
      </td>
    </tr>
    <tr>
      <td>
        2 <img src="https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon" />
      </td>
    </tr>
    <tr>
      <td>
        3 <img src="https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=32&d=identicon" />
      </td>
    </tr>
  </table>
  <!-- removed 1 from table1 -->
  Image src:
  <input type="text" id="imgSrc" size="75" />
</div>

相关内容

最新更新

热门标签：