从 <img> 标签自动生成 <a> 标签

Jmr 发表于 Dev

260

先生

我有一个页面，其中经常发生以下模式：

<a href="path/to/image.jpg">
    <img src="path/to/image.jpg">
</a>

为了避免拼写错误，我宁愿只输入一次图像和路径。

有没有办法（最好只使用原生 HTML/JS/CSS）来避免这种重复？

只需要支持最新的浏览器。

编辑添加：页面中有一个位置具有类似但可能冲突的模式：

<a href="https://a.web.site/">
    <img src="image.jpg">
</a>

如果需要，我可以摆脱它。但也许更强大的解决方案是从以下内容开始：

<a href="path/to/image.jpg">
    IMG_LINK_TO_CREATE
</a>

并用 img 标签替换预定义的模式，而不是相反。

k3lydev

为了回答您的问题，我将只使用Vanilla JavaScript。此外，由于我不清楚您是尝试从锚点创建 img 还是反之亦然，因此我正在为您做这两件事。我会把出现在你问题标题中的那个放在第一位。

确定您的元素：

如果你想让它工作，你需要至少给你的锚标签一个类或唯一的 id 属性，以便稍后在它们加载到 DOM 时正确修改它。

为图像标签生成锚标签

在这种情况下，由于您可能会使用多个锚点，并且您必须对每个想要的锚点都执行相同的操作，带有“create-link”的类属性足以让您直接从 DOM 轻松修改这些元素. 这样的事情会有所帮助：

<img class="create-link" src="path/to/image.jpg">

话虽如此，您可以创建一个调用的函数generateImages()来完成所有工作。

function generateImages(){
   let images = document.querySelectorAll(".create-link");
   images.forEach(image=>{
      let link = document.createElement('a'),
            parent = image.parentNode,
          childImage = new Image();
      link.href = image.src;
      link.classList.add('generated-link');
      childImage.src = image.src;
      link.append(childImage);
      image.parentNode.removeChild(image);
      parent.append(link);
   });
}

那应该这样做。您现在可以随时或在窗口加载事件中执行它。

window.onload = generateImages;

这是一个小提琴，可帮助您形象化此方法的整体。

https://jsfiddle.net/m90b6vc5/1/

从锚标签生成图像：

与另一个相同，确定您将来需要在 JavaScript 中使用的元素。代码会更容易一些，只需要从锚标记中检索链接并将其附加到新的图像元素：

function generateImages(){
   let a = document.querySelectorAll(".create-link");
   a.forEach(element=>{
      let image = new Image();
      image.src = element.href;
      element.append(image);
   });
}

https://jsfiddle.net/m90b6vc5

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。