参考资料

  1. HTML DOM 返回图像映射的某个区域的port 实例
  2. HTML DOM 返回和设置链接的hreflang属性实例
  3. HTML DOM将下拉列表变成多行列表
  4. HTML DOM 根节点childNodes 和 nodeValue
  5. HTML DOM 对iframe排版
  6. HTML DOM 返回文档的标题实例
  7. HTML DOM 返回文档中第一个图像的ID
  8. HTML DOM 根节点

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

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：链接属性元素标签样式详细文档对象模型主要