时间戳

首页 > 解决方案 > 如何使用 JavaScript 将文本菜单链接更改为图像？

javascript - 如何使用 JavaScript 将文本菜单链接更改为图像？

问题描述

我有一个需要用图像替换的菜单链接，我现在正试图通过使用控制台来做到这一点。

我一直在尝试使用的代码是这样的：

(document.getElementsByClassName("sub-menu-content"), {
    onrendered: function(canvas) {
      var screenshot = canvas.toDataURL("http://prototypes.example.com/test/MW/long-logo.png");
      document.getElementsByClassName("sub-menu-content").setAttribute("src", screenshot);
    }
  });
<ul class="main-sub-menu content-width">
  <li class="sub-menu-content">
  <a href="http://www.example.net/currency-forecast-tool" target="">Currency forecast tool
  </a>
  </li>
</ul>

该代码不会引发任何错误，但什么也不做。有任何想法吗？

标签： javascripthtml

解决方案

Ali没有src属性，分配它一个不会使其成为img

你可以给它分配background-image一个

(document.getElementsByClassName("sub-menu-content"), {
    onrendered: function(canvas) {
      var screenshot = canvas.toDataURL("http://prototypes.example.com/test/MW/long-logo.png");
      document.getElementsByClassName("sub-menu-content")[0].style.backgroundImage = 'url(' + screenshot + ')');
    }
  });

附带说明一下，getElementsByClassName()返回元素的集合，您需要类似的东西document.getElementsByClassName("sub-menu-content")[0]来定位特定元素。建议改为使用querySelector，如

(document.querySelector("sub-menu-content"), {
    onrendered: function(canvas) {
      var screenshot = canvas.toDataURL("http://prototypes.example.com/test/MW/long-logo.png");
      document.querySelector("sub-menu-content").style.backgroundImage = 'url(' + screenshot + ')');
    }
});

如果你需要一个img，你可以做这样的事情，使用，这将在锚内insertAdjacentHTML()插入一个：imga

var link = document.querySelector(".sub-menu-content a");
link.insertAdjacentHTML('afterbegin', '<img src="' + screenshot + '"/>');

一个DOMString表示相对于元素的位置；必须是以下字符串之一：

  • 'beforebegin': 在元素本身之前。
  • 'afterbegin': 就在元素内部，在它的第一个子元素之前。
  • 'beforeend': 就在元素内部，在它的最后一个子元素之后。
  • 'afterend': 在元素本身之后。

或者使用替换锚的内容innerHTML：

var link = document.querySelector(".sub-menu-content a");
link.innerHTML = '<img src="' + screenshot + '"/>';

根据评论更新，展示如何使用 CSS 选择器来查找特定元素

var screenshot = "http://placehold.it/200x100";
var link = document.querySelector(".sub-menu-content:nth-child(3) a");
link.innerHTML = '<img src="' + screenshot + '"/>';
<ul class="main-sub-menu content-width">
  <li class="sub-menu-content">
    <a href="http://www.example.net/currency-forecast-tool" target="">Currency forecast tool 1</a>
  </li>
  <li class="sub-menu-content">
    <a href="http://www.example.net/currency-forecast-tool" target="">Currency forecast tool 2</a>
  </li>
  <li class="sub-menu-content">
    <a href="http://www.example.net/currency-forecast-tool" target="">Currency forecast tool 3</a>
  </li>
  <li class="sub-menu-content">
    <a href="http://www.example.net/currency-forecast-tool" target="">Currency forecast tool 4</a>
  </li>
</ul>

推荐阅读