1

在某些时候，用户可能会对Style/Theme. 他们可能会想，“只要我能让它看起来像我喜欢的那样”WEB applications

示例：

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

我的需要：
不仅要更改类属性，还要更改完整的 CSS 定义本身。
如果我们强制用户从一组样式表中进行选择，那会将他们限制在一个很小的空间内，所以我想避免这种情况。

* 注意 *我在纯 javascript 中需要它，不使用任何 jquery 插件或任何 jquery 脚本

4

1 回答 1

3

你可以试试它的纯 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 中以改善 UserExperience

于 2012-11-21T02:12:15.070 回答