如何阻止 Javascript 显示默认图像和仅显示链接的文本？答案

【问题标题】：How to stop Javascript from showing default image and only text for link?如何阻止 Javascript 显示默认图像和仅显示链接的文本？
【发布时间】：2011-01-10 21:31:41
【问题描述】：

下面的 Javascript 有一个默认图像，但我想在此链接http://developer.mixi.co.jp/wp-content/uploads/2010/09/bt_check_1.gif 上显示此链接的文本“仅文本 url”，而不是此脚本默认使用的此按钮。这可能吗？

<div>
<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="some-data-key" data-url="http://someurl.com">only text url </a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
</div>

【问题讨论】：

标签： javascript html

【解决方案1】：

假设这是合法的（如果您对其进行修改，将这个脚本嵌入到您的站点中可能是不合法的），我们可以使用online JavaScript beautifier 解压缩该脚本。结果是这样的：

http://www.jsfiddle.net/T4Rrh/

我们感兴趣的是最后一个for 循环，每个按钮都在其中处理。我们可以安全地删除大部分图像生成和协议嗅探（顺便说一句，这是一种不必要的做法）以减轻代码的重量：

var type = (button["button"] || "button-1.png").split("-");
var prefix = ("https:" == document.location.protocol) ? "https://mixi.jp/" : "http://static.mixi.jp/";
if (!type || type.length < 2) type = ["button", "1.png"];
if (type[1].indexOf(".") == -1) type[1] += ".png";
var src = (type[0] == "button") ? [prefix, "img/basic/mixicheck_entry/bt_check_", type[1]] : (type[0] == "icon") ? [prefix, "img/basic/mixicheck_entry/icon_mixi_", type[1]] : [prefix, "img/basic/mixicheck_entry/bt_check_1.png"];
src = src.join("");

和

var img = document.createElement("img");
img.setAttribute("src", src);
img.style.border = "0";
var element = button.element;
for (var j = element.childNodes.length - 1; j >= 0; j--) {
    element.removeChild(element.childNodes[j]);
}
element.appendChild(img);

都应该被删除。然后，您可以缩小并保存代码，然后在您的页面中自己提供。清理后的代码如下所示：http://www.jsfiddle.net/XrYLX/

第二种方法：

使用CSS，我们首先移除了移除按钮元素所有子节点的JavaScript部分，所以按钮内的文本不会被移除：

for (var j = element.childNodes.length - 1; j >= 0; j--) {
    element.removeChild(element.childNodes[j]);
}

然后我们应用一些 CSS 来隐藏图像：

.mixi-check-button img {
    display: none;
}

请参阅：http://www.jsfiddle.net/T4Rrh/1/。

【讨论】：

@Yi Jiang - 感谢您编辑这个问题，因为我是 stackoverflow 的新手，所以无法添加按钮。我试过了，“只有文本网址”出现了，但它没有与 SNS 连接，导致“无数据”错误。上面的代码中是否有需要发送到此 SNS 的内容？
@tokyowp 我不完全确定你在这里要求什么，但上面的代码不应该影响发送到服务器的数据，除非使用了对图像本身的 HTTP 请求服务器-获取信息，在这种情况下，您可能希望使用 CSS 来隐藏图像。但是，我认为情况并非如此——所有信息似乎都是通过链接内的查询字符串发送的。
@蒋毅。我想在文本中显示“Mixiチェック”而不是这个按钮。我将如何使用 CSS 来阻止图像和文本的显示？
我认为这个问题可能是最好的，因为上面的 Javascript 是用于日本 SNS (Mixi) 共享按钮，类似于将 Facebook 点赞按钮添加到网站上。它显示此按钮，但我想显示文本而不是图像。我尝试将 img css 添加到 div 以显示：无，但图像和文本不显示。如何在 CSS 中显示文本而不是图像？
@tokyowp 因为 JavaScript 实际上会在插入图像之前删除按钮元素中的所有子节点（包括您的文本节点）。我怀疑对 JavaScript 的修改是问题的根源。应该没什么区别。

【解决方案2】：

将该脚本复制到您的站点并删除最后一行开头的element.appendChild(img);。

【讨论】：