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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。