如何使用 javascript/css 更改 href 属性的值？答案

【问题标题】：how can the value of an href attribute be changed using javascript/css?如何使用 javascript/css 更改 href 属性的值？
【发布时间】：2013-06-13 20:33:16
【问题描述】：

假设html包含如下结构：

<div>
    <a href="http://the/link/that/needs/to/be/changed">text</a>
</div>

<div>
    <div>
        //<script> or <style> must go here
    </div>
</div>

...并假设对最终 HTML 文件的“贡献”只能插入到指定位置，并假设“a”元素的标记不能以任何方式修改，是否可以添加javascript或css代码会改变前一个“a”元素的href属性引用的url？如果有，怎么做？

【问题讨论】：

见stackoverflow.com/questions/179713/…
如果你想得到之前的a元素并且不能改变HTML，应该这样做：var elements = document.getElementsByTagName('a'); var last = elements[elements.length - 1];。

标签： javascript html css hyperlink styles

【解决方案1】：

没有 id 也可以：

document.querySelector("a[href^='http://the']")

并设置 href 属性：

document.querySelector("a[href^='http://the']").href=whatever

有关querySelector 的完整参考（浏览器兼容性），请参阅MDN-Article

【讨论】：

【解决方案2】：

您可以使用以下方法来做到这一点：

document.getElementById("abc").href="xyz.php";

您需要为标签设置一个 ID，因此您的标签将如下所示：

    <div>
    <a href="http://the/link/that/needs/to/be/changed">text</a>
</div>

<div>
    <div>
        //<script> or <style> must go here
    </div>
</div>

【讨论】：

【解决方案3】：

给链接一个ID <a href='...' id='linkToChange'>text</a>

然后在您的脚本中访问它： document.getElementById('linkToChange').href='newAddress';

【讨论】：

我无法控制“a”元素的 id。

【解决方案4】：

在上面加上一个id，例如

<a id="the_a_tag" href="...">...</a>
   ^^^^^^^^^^^^^^

那么JS就简单了

document.getElementById('the_a_tag').href = 'new address goes here';

只要您将 javascript 放在相关 HTML 之后。

注意：CSS 仅用于演示。除了少数例外，它不会影响文档元素的内容，只会影响它们的显示方式（颜色/大小/位置/等...）。

【讨论】：

我无法控制“a”元素的 id。