使用javascript动态添加sylesheet到head

Question

I need to have the old "resize fonts" option at the top of the site I'm building - one link that is the default size, one that makes fonts a size bigger, and one that makes them two sizes bigger. it only needs to affect some nav and body copy, so I'd like to simply make 2 extra stylesheets to just style those elements, and upon clicking one of the links, load an additional stylesheet into the header. when you click the "default" link, it will go back to the original size (with no additional stylesheets loaded).

Is there a way to do this in javascript? This is a Wordpress site. Alternately, I could use js to add a tag to the body and target the elements that way.

What is the best way to do this?

Answer 1

You should just change the class of the elements. That will change their css to whatever is specified by that class in the stylesheet. Your first option is more complicated than it needs to be. If you use JQuery you can literally make this one line of code.

$("span#applicableId").each(function(){ 
    $(this).class("theOtherClass");
});

Answer 2

You can dynamically add a stylesheet on the fly by using something like below:

function loadNewStyleSheet() {
        var style = document.createElement('style');
        style.type = 'text/css';
        style.src = 'http://path/to/cssfile'
        document.body.appendChild(style);
            }

Answer 3

I would do this as an include statement in in a php tag. Then just have one php file you include on the top of each page.

php inlude info: http://php.net/manual/en/function.include.php

then from there I bet there is some code out there you could reuse.

For example maybe this could be of some help? it is a php script that will ajust the css styling of the page and not interfer with other parts. http://www.phpclasses.org/package/1296-PHP-Resizes-text-on-a-page-using-styles-and-sessions-.html

Answer 4

I guess that it is not possible to add it dynamically to head tag. Of course, you can do that, but this stylesheet won't be loaded. Maybe you should try to get it via ajax and append to a special script tag in your site. If user will choose another option, then you will load another content, clear this script tag and append new content there.