javascript - 如何通过 css/javascript 在没有 id/class 的单元格中选择图像

Question

我想在表格单元格内选择一个图像来添加一些附加样式。 HTML 代码是由 sharepoint 生成的，因此图片上没有直接的 id/class，我无法对其进行编辑。我不知道如何通过 css 或 javascript 选择它。

我要选择的图片上方的下一个类:

<td class="ms-rteTableEvenCol-0" style="width:25%;">​
  <a href="/cs/supplyhub/Plants/Forms/AllItems.aspx">
    <img src="/cs/supplyhub/SiteAssets/Picture21.png" 
         alt="Picture21.png" style="margin:5px;width:200px;height:133px;">
  </a>
  <br>
</td>

我阅读了很多关于选择器的主题，但我未能根据我的情况实现它们，所以请帮帮我。目标是添加一些鼠标悬停效果来表示图片作为按钮工作。

Answer 1

您可以使用querySelector 来获取第一个匹配的元素，请记住如果有更多<td>具有相同类的元素，您可能无法选择要查找的确切图像:

document.querySelector('.ms-rteTableEvenCol-0 > a > img');

如果你知道 src 属性你也可以这样做:

document.querySelector('img[src="/cs/supplyhub/SiteAssets/Picture21.png"]');

或通过替代文本:

document.querySelector('img[alt="Picture21.png"]');

CSS 选择器 与提供给 querySelector 的字符串完全相同:

.ms-rteTableEvenCol-0 > a > img { ... }

img[src="/cs/supplyhub/SiteAssets/Picture21.png"] { ... }

img[alt="Picture21.png"] { ... }