Results 1 to 2 of 2

Thread: Dynamic inclusion of CSS from localStorage

Hybrid View

  1. #1
    Join Date
    Aug 2010

    Dynamic inclusion of CSS from localStorage


    I have the text for 1..n style sheets stored in localStorage, each with their own key (i.e. each stored individually as an item in localStorage).

    I'm trying to figure out how I can add (any of) these style sheets to my page, with localStorage being the source.

    I understand how to dynamically add a <link> or <style> to the <head>. What I don't understand is how to populate the added <link> or <style> with content from localStorage.

    In the <link>, I've tried href="javascript:myFunctionToProvideText();". No joy.

    In the <style>, I've tried styleElement.innerText/innerHTML = myCSSTextFromLocalStorage. No joy.

    Any ideas?


    This project is only developing to the most recent browsers, with decent HTML5 and CSS3 support.

    I have managed to dynamically add to the page my styles from localStorage by wrapping the text in a <style> tag then appending the resulting text to the innerHTML of the body. It works in all 5 of the latest browsers. However, that's a bit hacky imo. If anyone knows how to get these styles into the <head>, I'm still interested in an answer to my original query. Cheers.
    Last edited by JimmyJimmy; 04-07-2012 at 05:57 PM.

  2. #2
    Join Date
    Jan 2007
    I haven't done any extensive cross-browser testing, but you should just be able to dynamically add a style tag:

    HTML Code:
    <script type='text/javascript'>
      var n = document.createElement('style');
      n.type = 'text/css';
      n.innerHTML = localStorage.css;
    I think you can use an existing tag too ... but, I'm pretty sure the above will work. However, there's an entirely different, presumably better approach that's designed to take care of this seamlessly for you, provided that you're not dynamically writing individual styles:

    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

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