HTML DOM Base href 属性
HTML DOM Base href 属性与 <base> HTML 标签关联。<base> 标签用于指定当前 HTML 文档中所有相对 URL 的基准 URL。一个 HTML 文档中最多只能有一个 <base> 标签。Base href 属性返回 base 元素中 href 属性的值。
语法
以下是语法 −
设置 href 属性 −
baseObject.href = URL
此处，URL 为基准 URL。
返回 href 属性 −
baseObject.href
示例
让我们看一个关于 Base href 属性的示例 −
<!DOCTYPE html>
<html>
<head>
<base id="myBase" href="https://www.bing.com">
</head>
<body>
<a href="/images">IMAGES</a>
<p>Click the below button to change href value of the above link</p>
<button onclick="SetHref()">SET IT</button>
<button onclick="GetHref()">GET IT</button>
<p id="Sample"></p>
<script>
function SetHref() {
document.getElementById("myBase").href = "https://duckduckgo.com";
document.getElementById("Sample").innerHTML = "Base URL was changed from bing.com
to duckduckgo.com";
}
function GetHref(){
var x=document.getElementById("myBase").href;
document.getElementById("Sample").innerHTML = x;
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击"设置"按钮 −
点击"获取"按钮 −
在上面的例子中 −
我们首先创建了一个 元素，其 id 为 “myBase”，属性 href 的值为 https://www.bing.com
<base id="myBase" href="https://www.bing.com">
然后，我们创建了一个锚元素，其属性 href 的值为 “/images”。这里的 “/images” 是相对路径，因为基路径在 base 标签中给出。结合基础元素和锚元素的 URL，它将变为 https://www.bing.com/images。
<a href="/images">IMAGES</a>
然后，我们创建了两个按钮"SET IT"和"GET IT"，分别调用 SetHref() 和 GetHref() 函数。
<button onclick="SetHref()">SET IT</button> <button onclick="GetHref()">GET IT</button>
SetHref() 函数使用 “myBase” id 获取 <base> 元素。然后，它使用 href 属性将其 URL 设置为 https://www.duckduckgo.com。更改成功的消息显示在 id 为"Sample"的段落中。
function SetHref() {
document.getElementById("myBase").href = "https://duckduckgo.com";
document.getElementById("Sample").innerHTML = "Base URL was changed from bing.com to .comduckduckgo";
}
GetHref() 使用 id "myBase"获取 <base> 元素。然后，它使用 href 属性获取其 URL 并将其赋值给变量 x。然后使用 innerHTML() 属性将段落的 innerHTML 更改为 x 。这将显示 <base> 元素的 href 值。
function GetHref(){
var x=document.getElementById("myBase").href;
document.getElementById("Sample").innerHTML = x;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
