HTML DOM Link rel屬性用法及代碼示例

HTML DOM Link rel 屬性設置/返回當前和鏈接文檔之間的關係，需要提及。

用法

以下是語法 -

返回rel屬性值

linkObject.rel

環境rel到一個值字符串

linkObject.rel = valueString

值字符串

這裏，“valueString”可以是以下 -

值字符串	描述
alternate	它提供
author	它提供了指向鏈接文檔作者的鏈接
dnsprefetch	它指定瀏覽器應預先為目標資源的來源執行 DNS 解析
help	如果有幫助文檔，它會提供一個鏈接
icon	它導入一個圖標來表示文檔
rel	它設置/返回當前和鏈接文檔之間的關係
license	它提供鏈接文檔的版權信息
next	它提供了一係列文檔中下一個文檔的鏈接
pingback	它提供處理對當前鏈接文檔的 pingback 的 pingback 服務器的地址
preconnect	它指定瀏覽器應該搶先連接到目標資源的源(如果有)
prefetch	它指定瀏覽器應搶先獲取和緩存目標資源，因為它需要 follow-up 文檔導航
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;
}

輸出

這將產生以下輸出 -

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Link rel Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。