如何通过JavaScript更改链接的HREF属性

Question

我有一个表单，用户可以输入一个URL。稍微调整一下这个输入得到的值就是变量#url，它会立即显示给用户。

我需要让我的网站中的“点赞”和“推文”按钮指向该URL。将它们的HREF设置为变量#url。

这些是分享按钮：

<a id="twtbutton" href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="theclocktwt">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

<fb:like id="fbbutton" send="false" layout="button_count" width="450" show_faces="false" font="" style="position: absolute; left:110px;"></fb:like>
</div>

你可以在这里看到它的工作原理：http://www.chusmix.com/tests/magic.html

“改进的链接”所显示的是我想要分享按钮使用的URL。

- lisovaccaro

---

你的问题缺少很多细节。这个按键事件是关于什么的？你想要实现什么？cleanURL()是什么？ - riwalk

Answer 1

这就是你想要做的事情 -

var yourElement = document.getElementById('yourHref');
 yourElement.setAttribute('href', '#url');

- Steve

---

-1/2（向下取整为0）。他显然有jQuery，所以使用jQuery。 - riwalk

他是否拥有 jQuery 无关紧要。答案有效，而问题并未说明“使用 jQuery”。 - richard

尝试了一下，看起来它正在工作，但只在调试器（Firefox）中。无论我把脚本放在哪里或者如何调用它，更新都没有反映在浏览器中。所以在调试器中我看到了更新后的链接，但显示的链接仍然是旧的。IE中也有相同的行为，两者都是最新版本。 - r41n

谢谢，虽然我不知道为什么你不直接使用 "document.getElementById('yourHref').setAttribute('href', '#url');"。 - Jonathon Philip Chambers

更好的可读性，我想。 - Jonathan Grupp

Answer 2

请参考 jQuery 网站上的以下页面：

http://api.jquery.com/attr/

应该能够使用attr('href', 'value');

- user342706

---

代码将类似于 $("a").attr("href","http://example.com");。显然，example.com是您想要用新的URL替换旧的URL。 - styfle

Answer 3

    $('#twtbutton').prop('href', #url);
    $('#fbbutton').prop('href', #url);

这将更改具有id = twtbutton和id = fbbutton的html元素的'href'属性，以存储在＃url中的值为准，其中＃url中存储的值是字符串数据类型。此答案利用了jQuery库。

- Andr3wB

---

你能对这个答案提供一些解释吗？ :D - Cacoon

当然，我偶然发现了这个线程，寻找如何将给定HTML元素的属性“href”的值更改为新值的示例。当前排名最高的答案对我来说并不完全有效，但是当我调整了我的代码（当然使用jQuery）到上面显示的代码时，它对我起作用了。因此，如果其他人像我一样遇到了其他排名答案的问题，我想提供这个片段。 - Andr3wB

Answer 4

试试这个：

$("#url").keypress(
    function(e) {
        if(e.keyCode == 13) {
            $("#output").attr('href', cleanURL($("#url").val()));
        }
    }
);

- Naveed Butt

---

我刚在jsfiddle上尝试了一下，它以某种方式修改了超链接字符串，而不是它所指向的URL。http://jsfiddle.net/Lisandro/LGwws/1/ - lisovaccaro