的Javascript：更改CSS文件中動態+餅乾

我想改變動態使用僅 javascript和保存在cookie中的變化使用CSS文件（<link href="..." />）。的Javascript：更改CSS文件中動態+餅乾

這是一個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; 
    }); 
});

在此先感謝您。

來源

2012-09-01 Natasha

jQuery **是** JavaScript。您可以通過[document.cookie]（https://developer.mozilla.org/en-US/docs/DOM/document.cookie）訪問cookie。 – Pointy

謝謝。我不想加載jQuery。那麼，CSS部分呢？ – Natasha

@Pointy除非它是一個HTTP唯一的cookie :) – PeeHaa

也許這可以幫助你..

(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);  
}());

編輯，完整的JavaScript沒有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); 
})

來源

2012-09-01 16:28:43

我不想添加一個CSS文件，但改變它。那麼你可以編輯你的文章嗎？謝謝。 – Natasha

最後一部分是jQuery和JavaScript的結合？也許需要另一個編輯，但我會檢查其他部分。謝謝。 – Natasha

所以你說你想在純JavaScript的當前代碼？ –

閱讀：http://www.quirksmode.org/js/cookies.html

而：http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

首先，讓我們製作一個示例html佈局。

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

接下來，讓我們做一個例子的CSS佈局。

span { 
    color: red; 
} 

p { 
    color: blue; 
} 

body { 
    background: black; 
}

現在是javascript。在我們做任何事之前，cookies不能存儲css信息。我們將使用cookie名稱來確定要加載的樣式的類型。上面的quirksmode資源可以讓我們輕鬆使用cookies。

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/

多次刷新頁面看到不同顏色的字。

來源

2012-09-01 16:43:15 railgun

+1在這裏有很好的信息，但與我的問題無關。我想更改** CSS File **（href位置）而不是內部樣式的元素。謝謝。 – Natasha

您無法使用javascript更改服務器/客戶端的CSS文件。您必須加載另一個CSS文件或編輯DOM中的現有CSS。如果您需要服務器端腳本，請查看PHP。 – railgun

我的帖子中的jQuery版本完全說出我想要的東西。我想要改變一個外部CSS文件的href位置在我的html基礎上點擊一個元素。 – Natasha

的Javascript：更改CSS文件中動態+餅乾

回答

相關問題