参考资料

  1. HTML DOM为表格创建一个标题
  2. HTML DOM 返回图像映射的某个区域的pathname 实例
  3. HTML DOM 属性
  4. HTML DOM 当点击完button不可用 实例
  5. HTML DOM改变表格的cellpadding和cellspacing
  6. HTML DOM一个行的innerHTML
  7. HTML DOM 哪个事件发生了？
  8. HTML DOM 返回页面上所有相对链接的基链接 实例

HTML DOM 返回和设置链接的href属性

详细介绍

HTML DOM (文档对象模型) 提供了访问和操作 HTML 元素的接口。对于链接元素 (<a>)，可以通过 DOM 来获取或设置其 href 属性。

相关标签

主要涉及 <a> 标签：

<a id="myLink" href="https://example.com">示例链接</a>

用法

获取 href 属性

var link = document.getElementById("myLink");
var hrefValue = link.href; // 获取 href 属性值

设置 href 属性

var link = document.getElementById("myLink");
link.href = "https://newurl.com"; // 设置新的 href 值

实例

<!DOCTYPE html>
<html>
<head>
    <title>href 属性示例</title>
</head>
<body>
    <a id="demoLink" href="https://google.com">访问Google</a>
    <button onclick="changeLink()">更改链接</button>
    <button onclick="showLink()">显示链接</button>

    <script>
        function changeLink() {
            document.getElementById("demoLink").href = "https://bing.com";
            document.getElementById("demoLink").textContent = "访问Bing";
        }
        
        function showLink() {
            alert("当前链接是: " + document.getElementById("demoLink").href);
        }
    </script>
</body>
</html>

功能

  1. 动态修改页面中的链接地址

  2. 根据用户交互改变导航行为

  3. 获取链接信息用于分析或显示

CSS 扩展

可以通过 CSS 为链接添加样式，增强视觉效果：

a {
    color: blue;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: red;
    text-decoration: underline;
}

a:visited {
    color: purple;
}

这些样式可以与 DOM 操作结合使用，创建交互式链接效果。

TAG：链接属性元素标签样式详细文档对象模型主要

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。