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

Question

假设 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 的代码？如果是这样，怎么做？

Answer 1

你可以在没有 id 的情况下做到这一点：

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

并设置 href 道具：

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

有关querySelector查看MDN 文章的完整参考（浏览器兼容性）

Answer 2

在上面放一个id，例如

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

那么JS很简单

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

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

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

Answer 3

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

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

Answer 4

您可以使用以下方法执行此操作：

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>