Question

我想使用CSS更改锚标记的内容。下面是锚标记的HTML：

<a class="search"><img src="/search.png" id="searchImg"></a>

锚标签中有一个图像，我想用CSS替换它。我无法更改HTML，因为我无法访问它。有人可以帮我这个吗？感谢。

Answer 1

如果你绝对必须这样做，我的评论几乎涵盖了为什么你不应该......但是不推荐。

为了维护任何当前的可访问性，在我看来，您希望隐藏图像直观，但保留其位置和大小。

因此：

＆＃13;

.search {
  border: 1px solid red;
  /* for visiual cue */
  position: relative;
  display: inline-block;
}
.search img {
  opacity: 0;
  /* just hide it visually but leave it in place */
  display: block;
}
.search::before {
  content: "Searching";
  position: absolute;
  /* position the pseudo-element over the image with the same dimenesions */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: lightblue;
  text-align: center;
}

＆＃13;

<a class="search">
  <img src="http://lorempixel.com/output/abstract-q-c-100-25-6.jpg" id="searchImg">
</a>

＆＃13;

Answer 2

好。如果您真的无法访问HTML源代码，我能想到的唯一可行的解决方案是生成覆盖图像的<property> <description>The minimum allocation for every container request at the RM, in MBs. Memory requests lower than this won't take effect, and the specified value will get allocated at minimum.</description> <name>yarn.scheduler.minimum-allocation-mb</name> <value>512</value> </property> <property> <description>The maximum allocation for every container request at the RM, in MBs. Memory requests higher than this won't take effect, and will get capped to this value.</description> <name>yarn.scheduler.maximum-allocation-mb</name> <value>2048</value> </property> <property> <name>yarn.nodemanager.resource.memory-mb</name> <value>2048</value> </property>元素，该元素显示文本。

pseudo

这根本不是一个非常好的解决方案。我宁愿有一个隐藏元素，其中包含锚内的文本，切换显示状态，或只是使用JavaScript ...

Answer 3

你可以在jQuery

的帮助下完成

 $("search").text("your text");

使用CSS更改锚标记的内容

3 个答案: