SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot bloo_fish's Avatar
    Join Date
    Aug 2003
    Location
    Bucks [Uk]
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding Style tag to head

    Hi,


    I am attempting to add a style tag (and some styles) within the head tag.


    I have attempted this using two methods and both failed in IE (InnerHTML and appendChild).


    The append child method i tried looks like


    Code:
    function addStyles(styles) {
      
      var newStyleTag = document.createElement('style');
      newStyleTag.setAttribute('id', 'extraStyle');
      
      var head = document.getElementsByTagName('head')[0];
      
      head.appendChild(newStyleTag);
    
      
      var oStyles = document.createTextNode(styles);
      document.getElementById('extraStyle').appendChild(oStyles);
    
    }

    So i am basically just

    1. Creating the style tag and giving it an id
    2. appending the style tag to the head
    3. Creating a new text node and appending it to the style tag


    It is failing on the last append child. The inner HTML method was failing on about the same part.


    Any ideas on how i could successfully do this?

  2. #2
    SitePoint Enthusiast Tygatur's Avatar
    Join Date
    Apr 2006
    Location
    Germany
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you want to use an external stylesheet ?
    Then you have to use the <link rel="stylesheet" href="mystyles.css" /> tag.

    Otherwise use the style object in JavaScript.
    HTML Code:
    <script type="text/javascript">
    len=document.getElementsByTagName('a').length;//in this case changing <a> style properties
    for(i=0;i<len;i++){
    document.getElementsByTagName('a')[i].style.backgroundColor='#ff0000';
    }
    </script>
    to code or not to code ?
    that's too much of a question for a signature.

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)

    but not in IE

    This works in Firefox
    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    function addStyles(styles) {
      
      var newStyleTag = document.createElement('style');
      newStyleTag.setAttribute('id', 'extraStyle');
    alert(newStyleTag.getAttribute('id'));  
      var head = document.getElementsByTagName('head')[0];
    alert(head.innerHTML);
      head.appendChild(newStyleTag);
    alert(head.innerHTML);  
    
    alert(styles);
      var oStyles = document.createTextNode(styles);
      var newTag = document.getElementById('extraStyle');
      newTag.appendChild(oStyles);
    alert(head.innerHTML);  
    
    }
    </script>
    </head>
    <body onload="addStyles('p {color: red}');">
    <p id="test">foo</p>
    </body>
    </html>
    It will also worlk in IE if you appendChild to #test. I guess IE puts the page's elements into a document element array and doesn't recognise the new element as being part of the document.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Location
    Leeds, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to be using addRule for FF and insertRule for IE (or the other way round). google those functions

  5. #5
    SitePoint Zealot bloo_fish's Avatar
    Join Date
    Aug 2003
    Location
    Bucks [Uk]
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for the responses guys - i tried Mittineague's but I couldn’t get it to work in IE, and NakedIntruder method of using insertRule/AddRule (or my bodged coding) seemed to crash IE (


    I went for a similar approach to the one Tygatur suggested - I had to do it based on a class of an element though so i used a function from http://www.robertnyman.com/2005/11/0...tsbyclassname/ to get all the elements that had a certain class.


    Thanks for everyone’s help


Bookmarks

Posting Permissions

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