Question

在某些时候，用户可能会对Style/Theme的{{1}}感到厌倦他们可能会想，“只有我能让它看起来像我喜欢的方式”

示例：

我自己是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>

注意：我们可以将用户首选样式存储在browserStorage / Server中以改善UserExperience

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

1 个答案: