Link href 属性
JavaScript基础 2022-06-08 16:51:35小码哥的IT人生shichen
Link href 属性
实例
例子 1
返回被链接文档的 URL：
var x = document.getElementById("myLink").href;
完整实例：
<!DOCTYPE html>
<html>
<head>
<link id="myLink" rel="stylesheet" type="text/css" href="/demo/htmldom/style.css">
</head>
<body>
<h1>我使用链接的样式表进行格式化</h1>
<p>单击该按钮可返回链接文档的 URL。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myLink").href;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 2
更改样式表：
document.getElementById("myLink").href = "style2.css";
完整实例：
<!DOCTYPE html>
<html>
<head>
<link id="myLink" rel="stylesheet" type="text/css" href="/demo/htmldom/style.css">
</head>
<body>
<h1>我使用链接的样式表进行格式化</h1>
<p>单击该按钮可更改链接文档的 href 属性的值。这将更换新的样式表。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myLink").href = "/demo/htmldom/style_2.css";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
返回 href 属性：
linkObject.href
设置 href 属性：
linkObject.href = URL
属性值
| 值 | 描述 |
|---|---|
| URL |
规定被链接资源/文档的 URL。 可能的值：
|
技术细节
| 返回值： | 字符串值，表示被链接文档的 URL。返回整个 URL，包括协议（如 http://）。 |
|---|
浏览器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
