How to dynamically reload a .css?

Question

I have a website that I would like to present different styles for evaluation by having users click on a link(s) where an according proposed style gets loaded. How can I dynamically reload .css files?

Travis J · Accepted Answer · 2012-01-25 21:58:50Z

1

Using javascript you should be able to manipulate the css elements (such as document.createElement("style"); and then filling it with what you need and appending it to the page. Replacing that element will change the css that the page is styled with. However, if you are trying to switch between linked .css files, it may not work dynamically because it could require a page refresh.

answered Jan 25, 2012 at 21:58

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

genxgeek · Accepted Answer · 2012-01-26 08:04:11Z

0

This did the trick!

<script type="text/javascript">
    function loadjscssfile(filename) {
            var fileref = document.createElement("link")
            fileref.setAttribute("rel", "stylesheet")
            fileref.setAttribute("type", "text/css")
            fileref.setAttribute("href", filename)
        }
        if (typeof fileref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref)
    }    
</script>

answered Jan 26, 2012 at 8:04

genxgeek

13.4k42 gold badges141 silver badges223 bronze badges

Collectives™ on Stack Overflow

How to dynamically reload a .css?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related