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; }
輸出
這將產生以下輸出:
廣告