Javascript：动态更改CSS文件+ Cookie [英] Javascript: Change CSS File Dynamically + Cookie

问题描述

我要使用动态更改所使用的 CSS文件（< link href =.../> >

这是一个jQuery版本，可以实现我想要的效果（ ref ），但是我怎么能在javascript中做到这一点？

  if（$。cookie（css））{
 $（link）。attr（href，$。cookie （css））; 
} 
 $（document）.ready（function（）{
 $（＃nav li a）。 .attr（href，$（this）.attr（'rel'））; 
 $ .cookie（css，$（this）.attr（'rel'），{expires：365，path ：'/'}）; 
 return false; 
}）; 
}）;先感谢您。
解决方案
也许这可以帮助你。
 （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）; 
 }（））; 
  
 
 
 
 
 
 
编辑不含jQuery的完整JavaScript 
 函数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 = /; 
} 
 
函数readCookie（name）{
 var nameEQ = name +=; 
 var ca = document.cookie.split（';'）; 
 for（var i = 0; i  var c = ca [i]; $ c $ b 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 =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， ; 
 event.preventDefault（）; 
}，false）; 
}）
  
 
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);
})


                        
这篇关于Javascript：动态更改CSS文件+ Cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！