Javascript：动态更改CSS文件+ Cookie

我想仅使用javascript动态更改使用的CSS文件 （ ）并保存cookie中的更改。

这是一个jQuery版本，它做我想要的（ ref ），但我怎么能在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; }); }); 

先感谢您。

Answer 1

也许这可以帮到你..

 (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

 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'); //  e.href = readCookie('css'); } var element = document.getElementById('change-css'); // Click Here 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); }) 

Answer 2

阅读 ： http ： //www.quirksmode.org/js/cookies.html

并且 ： http ： //www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

首先，让我们做一个示例html布局。

    sometext 
somemoretext
   

接下来，让我们做一个示例css布局。

 span { color: red; } p { color: blue; } body { background: black; } 

现在是javascript。 在我们做任何事情之前，cookie不能存储css信息。 我们将使用cookie名称来确定要加载的样式类型。 上面的quirksmode资源让我们可以轻松使用cookie。

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

在这种情况下，我们想要更改样式。 我们可以使用两个方法： document.element.style.property 或 appendChild和另一个CSS工作表的href。 在此示例中，我们使用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) } 

实例 ： http ： //jsfiddle.net/5HGsH/3/

多次刷新页面以查看不同颜色的单词。