创建用户脚本以在单击两个按钮时更改网站的样式表答案

【问题标题】：Creating a userscript to change the stylesheet of a website upon clicking between two buttons创建用户脚本以在单击两个按钮时更改网站的样式表
【发布时间】：2018-08-23 07:14:34
【问题描述】：

好的，所以我在环顾四周后编译了这段代码，以至少确保原则上从一个 css 源更改为另一个应该有效。代码是这样的：

主页

  <html><head><link rel="Stylesheet" href=""  type="text/css" 

id="style"/>
    <script 

src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jque

ry.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('button').click(function () {
                var txt = $(this).html();
                if(txt=='Night Mode')
                    {

                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
                return false;
                     }
                 else if (txt == 'Day Mode') {
                  $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
                  return false;               }

            });

        });

    </script>
<title>WOT</title><head>
<body>

LOL
<form id="form1" runat="server">
    <div>
    <h1>My Website</h1>
    <br />
    <button>Night Mode</button>
    <button>Day Mode</button>
    </div>
    </form>


</body>

为了测试目的，CSS 1 和 2 只是在其中包含相同的行，只是颜色不同。

body {
    background-color: blue;
}

我的问题是：当单击我想到的页面上的两个按钮之一时，如何将此代码编译为将更改 css 链接源的 usescript。

感谢您的帮助/时间:)

【问题讨论】：

您是否期望 CSS 已经存在于相关网站上？也就是说，你真的可以使用$('link#style').attr('href', 'one.css');吗？
不，css 链接将在外部托管，因此将使用完整的 url。
你想怎么用这个？您是在制作浏览器插件还是要使用第三方扩展来注入它？
如果你可以直接链接到它，它应该是微不足道的 - 只需将 <script> 内的所有内容放入用户脚本文本中，需要 jQuery，并更改 CSS 链接。（但不需要 jQuery，您可以考虑使用纯 Javascript）
@Jerodev 用户脚本意味着用户脚本管理器，例如 Tampermonkey 或 Greasemonkey。

标签： javascript html css userscripts

【解决方案1】：

希望这对您有所帮助。写了一个用户脚本来改变纯 Javascript 的主题。（只是基于 StackOverFlow 写的 css）。

脚本在所有页面的右上角添加一个下拉菜单。选择主题后，页面中的主题也会更新。将其保存在 Tampermonkey 中并重新加载此页面。

为body、div、.container、.content、.nav-bar、.sidebar 等常用标签/ID/类提供 css，可能会使以下内容在多个站点中工作。

// ==UserScript==
// @name         StackOverFlow
// @namespace    VigeshRaja_UserScripts
// @version      0.1
// @description  Testing
// @author       Vignesh Raja
// @match        http*://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var selectelem = `<div class="themecolor">
                        <select id="themecolor" onchange="changeTheme()">
                            <option value="default">Default</option>
                            <option value="sunny">Sunny</option>
                            <option value="night">Night</option>
                            <option value="rosy">Rosy</option>
                        </select>
                      </div>`;
    var basestyle = ".themecolor{position: fixed; top: 0; right: 0; z-index: 100000000; padding: 10px; background: #e43939;} body{background: $bodycolor$; color: $bodyfontcolor$;}#content{background-color: $contentcolor$;}";
    var modes = {default: {bodycolor:"", bodyfontcolor: "", contentcolor:""},
                sunny : {bodycolor:"f8d767", bodyfontcolor: "ffffff", contentcolor:"d4bb82"},
                night : {bodycolor:"969590", bodyfontcolor: "ffffff", contentcolor:"585753"},
                 rosy : {bodycolor:"f59bda", bodyfontcolor: "ffffff", contentcolor:"f59bda"}};

    function addStyle(style)
    {
        var headelem = document.getElementsByTagName("head")[0];
        var styleelem = document.createElement("style");
        styleelem.setAttribute("id","customtheme");
        styleelem.type="text/css";
        styleelem.appendChild(document.createTextNode(style));
        headelem.appendChild(styleelem);
    }

    window.changeTheme = function(){
        var style = basestyle;
        var theme = document.getElementById("themecolor").value;
        for(var colortype of Object.keys(modes[theme]))
        {
            style = style.replace("$"+colortype+"$", "#"+modes[theme][colortype]);
        }

        var customtheme = document.getElementById("customtheme");
        if(customtheme)
        {
            customtheme.remove();
        }
        addStyle(style);
    }

    document.body.insertAdjacentHTML("beforeend",selectelem);
    addStyle(basestyle);
})();

【讨论】：