HTML DOM Link用法及代碼示例

HTML DOM鏈接對象用於訪問HTML <link>元素。

用法:

要訪問HTML元素：
```
document.getElementById("myLink"); 
```
創建一個新的HTML元素：
```
document.getElementById("myLink"); 
```

屬性值：

值	描述
charset	它分配鏈接文檔的字符編碼
crossOrigin	它分配鏈接文檔的CORS設置
disabled	它指定是否禁用鏈接的文檔
href	用於設置/返回鏈接文檔的URL
hreflang	它分配鏈接文檔的語言代碼
media	它為鏈接元素分配媒體類型
rel	分配當前文檔和鏈接文檔之間的關係
rev	它將鏈接文檔中的反向關係分配給當前文檔
sizes	返回鏈接資源的sizes屬性的值
type	用於設置/返回鏈接文檔的內容類型

示例1：訪問鏈接元素。

<!DOCTYPE html> 
<html> 
  
<head> 
    <link id="linkid" 
          rel="stylesheet" 
          type="text/css"
          href="styles.css"> 
</head> 
  
<body> 
    <h1>TO ACCESS LINK ELEMENT:</h1> 
  
    <p>PRESS THE BUTTON TO GET THE URL  
      OF THE LINKED DOCUMENT.</p> 
  
    <button onclick="gfg()">Get URL 
  </button> 
  
    <p id="pid"></p> 
  
    <script> 
        function gfg() { 
            
            // Access link element. 
            var NEW = document.getElementById( 
              "linkid").href; 
            document.getElementById( 
              "pid").innerHTML = NEW; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

點擊之前：

單擊後：

示例-2：創建鏈接元素。

<!DOCTYPE html> 
<html> 
  
<head> 
</head> 
  
<body> 
    <h1>TO CREATE A LINK ELEMENT.</h1> 
  
    <button onclick="myFunction()">Create</button> 
    <p id="pid"></p> 
    <script> 
        function myFunction() { 
            
            // Create link element. 
            var NEW = document.createElement( 
              "LINK"); 
            
            // set attributes. 
            NEW.setAttribute("id", "linkid"); 
            NEW.setAttribute("rel", "stylesheet"); 
            NEW.setAttribute("type", "text/css"); 
            NEW.setAttribute("href", "styles.css"); 
            document.head.appendChild(NEW); 
  
            var NEW1 = document.getElementById( 
              "linkid").href; 
            document.getElementById("pid").innerHTML =  
              NEW1; 
  
        } 
    </script> 
  
</body> 
  
</html>

輸出：

點擊之前：

單擊後：

支持的瀏覽器：

Chrome
Firefox
實習探險家
Safari
Opera

相關用法

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