dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Dynamic inclusion of CSS from localStorage

  1. #1
    Join Date
    Aug 2010
    Posts
    7

    Dynamic inclusion of CSS from localStorage

    Hi

    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?

    Cheers.

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

    >>>Addendum>>>
    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
    Location
    Wisconsin
    Posts
    2,120
    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;
      document.body.appendChild(n);
    </script>
    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:

    http://www.w3schools.com/html5/html5_app_cache.asp

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