HTML DOM link rel 屬性


HTML DOM link rel 屬性設定/返回當前文件和連結文件之間的關係,必須提及。

語法

以下是語法:

  • 返回 **rel** 屬性值
linkObject.rel
  • 將 **rel** 設定為 valueString
linkObject.rel = valueString

值字串

這裡,**“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;
}

輸出

這將產生以下輸出:

更新於:2019-07-30

90 次檢視

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告