www.webdeveloper.com
Results 1 to 2 of 2

Thread: insert <link> into html via javascript

  1. #1
    Join Date
    Dec 2005
    Location
    Bucharest, Romania
    Posts
    21

    insert <link> into html via javascript

    Hello,

    I am trying to use the lalit.lab font detector in order to serve different style sheets based on what fonts the user has installed.

    My problem is that I don't know how to insert the <link rel="stylesheet" href="/stylesheets/css1.css"> into the HTML via javascript.

    The code I have is something like this (i know it's not actually javascript code):

    Code:
    if (detective.test('candara')) {  // tests if the font is installed
          <link rel="stylesheet" href="/stylesheets/css1.css"> // here it should write to the html la link to the css
    }
    else { 
           <link rel="stylesheet" href="/stylesheets/css2.css">
    }
    I found something but it only works with html elements:
    Code:
     var o = document.createElement("p");
     o.appendChild(document.createTextNode("something"));
     document.body.insertBefore(o, document.getElementById("b1"));
    by inserting a <p>something</p> in the html before an element with the id=b1

    I would appreciate if anyone could help me inserting the <link rel="stylesheet" href="/stylesheets/css1.css"> via javascript...

    Thanks

  2. #2
    Join Date
    Sep 2007
    Posts
    317
    As far as I know,
    I tried this code. It worked on Firefox and Konqueror.

    a.htm
    Code:
      
    <head>
    <script type="text/javascript">
    
    var el = document.createElement("link");
    el.setAttribute("rel","stylesheet");
    el.setAttribute("href","a.css");
    
    var h =document.getElementsByTagName("head")[0];
    h.appendChild(el);
    alert(h.innerHTML);
    
    </script>
    </head>
    <body>
    <div class="theTimeThroughAges">The Time Through Ages. <br>In the Name of Allah, Most Gracious, Most Merciful. <br> 1. By the Time, <br> 2. Verily Man is in loss, <br> 3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.</div>
    a.css
    Code:
      
    .theTimeThroughAges { width: 350px; height: 150px; background-color: aqua; font-size: 12px; color: blue; padding: 35px; border: 3px solid turquoise;}
    Last edited by Ayşe; 08-03-2010 at 09:00 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles