javascript - 将主题/动态 CSS 应用于页面/任何 HTML 元素

Question

在某些时候，用户可能会对WEB 应用程序 的Style/Theme 感到厌倦。
他们可能会想，“只有我能让它看起来像我喜欢的样子”

示例:

• 我自己是 Stack Overflow 的用户。如果我喜欢 Page-headerBar 看起来是蓝色/紫色怎么办
• 页面本身具有黑色背景和白色文本颜色
• ...

我的需求:
不仅更改类属性，还更改完整的 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>

注意:我们可以将 User Preferred 样式存储在 browserStorage/Server 中以改善用户体验