페이지/임의의 HTML 요소에 테마/동적 CSS 적용

Question

어느 시점에 사용자는 WEB applications의 Style/Theme에 심심할 수 있습니다.

• 나 자신이 스택 오버플로의 사용자입니다 :
  그들은이 생각하는 것,
  

  예를 "나는 모양새 수 있다면 만 나는 그것을 좋아". 나는 무엇

내 필요 ... 페이지-headerBar는

페이지 자체가 검은 색 배경에 흰색 텍스트 색상

을 가지고 퍼플 블루 /보고 싶은 경우에 :
단지를 변경하지 않음 class 속성이지만 완전한 CSS 정의 자체.
우리가 사용자로 하여금 스타일 시트 세트에서 선택하도록하면, 그것들을 작은 공간으로 제한하게 될 것이므로, 나는 그것을 피하고 싶습니다.

는

* 참고 * 내가 어떤 jQuery 플러그인 또는 JQuery와 스크립트를 사용하지 않는 순수 자바 스크립트를 필요로

Answer 1

당신이 그것의 순수 자바 스크립트를 시도 할 수 있습니다

<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> 

참고 : 우리는 사용자를 저장할 수 브라우저 환경에서 사용자 환경을 개선하기 위해 선호하는 스타일