Javascript: Change CSS File Dynamically + Cookie

StackOverflow https://stackoverflow.com/questions/12229413

문제

I want to change the used CSS File (<link href="..." />) dynamically using only javascript and to save changes in cookies.

This is a jQuery version that does what I want (ref), but how can I do this in javascript?

if($.cookie("css")) {
    $("link").attr("href",$.cookie("css"));
}
$(document).ready(function() {
    $("#nav li a").click(function() {
        $("link").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
    });
});

Thank you in advance.

도움이 되었습니까?

해결책

maybe this could help you..

(function() {
    var e = document.createElement('link'); 
    e.href = document.location.protocol + '//example.com/file.css';
    e.type = 'text/css';
    e.rel = 'stylesheet';
    e.media = 'screen';
    document.getElementsByTagName('head')[0].appendChild(e);      
}());

Edit, full JavaScript without jQuery

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

document.addEventListener('DOMContentLoaded',function(){

    if(readCookie('css')){
        var e = document.getElementById('test-css'); // <link href="..." id="test-css"/>
        e.href = readCookie('css'); 
    }

    var element = document.getElementById('change-css'); // <a herf="#" id="change-css" rel="file.css">Click Here</a>
    element.addEventListener('click', function (event) { 
        var e = document.getElementById('test-css');
        e.href = this.rel;
        if(readCookie('css')){  
            eraseCookie('css');     
        }
        createCookie('css',this.rel,365); 
        event.preventDefault(); 
    }, false);
})

다른 팁

Read: http://www.quirksmode.org/js/cookies.html

And: http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

First, lets make an example html layout.

<html> <!--#include javascript.js styles.css-->
    <body>
        <span>sometext</span>
        <p>somemoretext</p>
    </body>
</html>

Next, lets make an example css layout.

span {
    color: red;
}

p {
    color: blue;
}

body {
    background: black;
}

Now is the javascript. Before we do anything, cookies cannot store css information. We will use cookies names to determine the type of style to load. The quirksmode resource above lets us easily use cookies.

if(readCookie("newStyle")) {
    // do something
} else {
    // do something else
}

In this case, we want to change the styles. We can use two methods: document.element.style.property or appendChild with the href of another CSS sheet. In this example, we use document.element.style.property.

if(readCookie("newStyle")) {
    eraseCookie("newStyle")
    document.getElementsByTagName("span")[0].style.color = "purple"
    document.getElementsByTagName("p")[0].style.color = "pink"
} else {
    createCookie("newStyle",0000,60)
}

Live Example: http://jsfiddle.net/5HGsH/3/

Refresh the page multiple times to see different colored words.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top