Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Link Object

  • Last Updated : 14 Feb, 2019

HTML DOM Link Object is used to access HTML <link> element.

Syntax:

  • To Access a HTML element:
    document.getElementById("myLink"); 
  • To Create a New HTML element:
    document.getElementById("myLink"); 

    Propertie Values:

    ValueDescription
    charsetIt assigns the character encoding of the linked document
    crossOriginIt assigns the the CORS settings of the linked document
    disabledIt assigns whether the linked document is disabled, or not
    hrefIt is used to set/return the URL of the linked document
    hreflangIt assigns the language code of the linked document
    mediaIt assigns the media type for the link element
    relIt assigns the relationship between the current document and the linked document
    revIt assigns the reverse relationship from the linked document to the current document
    sizesReturns the sizes attribute’s value of the linked resource
    typeIt is used to set/return the content type of the linked document

    Example-1: Accessing link element.




    <!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>

    Output:



    Before clicking:

    After clicking:

    Example-2: Create link element.




    <!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>

    Output:

    Before clicking:

    After clicking:

    Supported Browsers:

    • Chrome
    • Firefox
    • Interent Explorer
    • Safari
    • Opera

    Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :