應用主題/動態的CSS的頁/任何HTML元素

Question

在某些時候，用戶可能會感到厭倦的WEB applications的Style/Theme的。
他們可能會認爲，「只有當我可以使它的樣子，我喜歡它」

例如：

• 我自己是堆棧溢出的用戶。如果我喜歡的頁面，headerBar看藍/紫
• 頁面本身有一個黑色的背景和白色文本
• ...

我需要：
不只是改變class屬性，但完整的CSS定義本身。
如果我們強制用戶從一組樣式表中進行選擇，那將會將它們限制在一個小空間中，所以我喜歡避免這種情況。

*注*我需要它在純JavaScript不使用任何的jQuery插件或任何jQuery腳本

Answer 1

你可以試試這個它的純JavaScript

<script> 
    function applyit() 
    { 
     var ref = document.querySelector("#divel"); 
     var bdy = document.getElementsByTagName("body")[0]; 
     var style = (bdy.querySelector("#thm") || document.createElement("style")); 
     style.setAttribute("id","thm"); 
     var reqCSS = prompt("Enter the CSS Body","color:#AA5533;"); 
     style.innerHTML = ".cus{"+reqCSS+"}"; 
     bdy.appendChild(style); 
     ref.setAttribute("class","cus"); 
    } 
    </script> 
    <style> .def { color:#0000FF; } </style> 

<div id="divel" class="def"> 
    <h3>This is a heading in a div element Which Has The Color Change</h3> 
    <p>This is p tag in a div element Which Has The Color Change.</p> 
</div> 

<p onclick="applyit();">Click Here To Change The Color For Heading and p tag.</p> 

注： 我們可以存儲用戶瀏覽器存儲/服務器中的首選樣式，以提高用戶體驗