时间戳

首页 > 解决方案 > 在两个按钮之间单击时创建用户脚本以更改网站的样式表

javascript - 在两个按钮之间单击时创建用户脚本以更改网站的样式表

问题描述

好的，所以我在环顾四周后编译了这段代码，以至少确保原则上从一个 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。

感谢您的帮助/时间:)

标签： javascripthtmlcssuserscripts

解决方案

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

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

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

// ==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);
})();

推荐阅读