CODEWITHSUNDEEP
htmlcssasp.net-mvc-3
genxgeek
genxgeek

Reputation: 13367

How to dynamically reload a .css?

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?

Upvotes: 0

Views: 900

Answers (2)

genxgeek
genxgeek

Reputation: 13367

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>

Upvotes: 0

Travis J
Travis J

Reputation: 82337

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.

Upvotes: 1

Related Questions