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，例如

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

然后JS只是

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

只要你把javascript放在相关的HTML之后。

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

Answer 2

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

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

并设置href prop：

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

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

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>

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

4 个答案: