参考资料

  1. HTML DOM 返回表单中的enctype属性的值
  2. HTML DOM 返回文档中第一个表单的名字
  3. HTML DOM 返回页面上所有相对链接的基链接 实例
  4. HTML DOM 返回文档中第一个图像的ID
  5. HTML DOM 返回和设置一个iframe中的scrolling属性的值
  6. HTML DOM 返回图像映射的某个区域的hostname实例
  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：链接属性元素标签样式详细文档对象模型主要