HTML DOM Link rel 属性
htmlweb developmentfront end technology更新于 2025/7/15 22:04:17
HTML DOM Link rel 属性设置/返回当前文档与链接文档之间的关系，并且必须提及。
语法
以下是语法 −
- 返回 rel 属性值
linkObject.rel
- 将 rel 设置为 valueString
linkObject.rel = valueString
值字符串
此处，"valueString" 可以是以下 −
| 值字符串 | 描述 |
|---|---|
| alternate | 提供 |
| author | 提供指向链接文档作者的链接 |
| dnsprefetch | 指定浏览器应预先对目标资源的来源执行 DNS 解析 |
| help | 提供帮助文档的链接(如果有) |
| icon | 导入一个图标来表示文档 |
| rel | 设置/返回当前文档与链接文档之间的关系 |
| license | 提供链接文档的版权信息 |
| next | 提供指向该系列文档中下一个文档的链接 |
| pingback | 提供处理指向当前链接文档的 pingback 的 pingback 服务器的地址 |
| preconnect | 指定浏览器应预先连接到目标资源的来源(如果有) |
| prefetch | 指定浏览器应预先获取并缓存目标资源，以便后续的文档导航 |
| preload | 指定浏览器代理必须根据"as"指定的目的地，预先获取并缓存当前导航所需的目标资源。属性(以及与该目标关联的优先级)。 |
| prerender | 指定浏览器应在后台加载指定的网页。因此，如果用户导航到此页面，它会加快页面加载速度。 |
| prev | 它表示该文档是一系列文档的一部分，并且该系列中的上一个文档是引用的链接文档。 |
| search | 它提供了一个指向资源的链接，可用于搜索当前文档及其相关页面。 |
| stylesheet | 它在当前文档 |
示例
让我们看一个 Link rel 属性的示例 −
<!DOCTYPE html>
<html>
<head>
<title>Link rel</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-rel</legend>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
if(extStyle.rel === 'stylesheet')
divDisplay.textContent = 'The linked document is of type stylesheet';
else
divDisplay.textContent = 'The linked document is of type '+extStyle.rel;
</script>
</body>
</html>
在上面的例子中，‘style.css’ 包含 −
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
输出
这将产生以下输出 −
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
