????????? 油猴腳本中，添加CSS代碼的兩種方法 ?????????

第一種：官方格式

// ==UserScript==
// @name         腳本名稱
// @namespace    http://tampermonkey.net/
// @version      2018-08-18
// @description  腳本描述。
// @author       Tih
// @match        *://*/*
// @icon         data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NiA3NSI+PHBhdGggZD0iTTAsMi43OVY3Mi4yMUEyLjgsMi44LDAsMCwwLDIuODEsNzVIOTMuMTlBMi44LDIuOCwwLDAsMCw5Niw3Mi4yMVYyLjc5QTIuOCwyLjgsMCwwLDAsOTMuMTksMEgyLjgxQTIuOCwyLjgsMCwwLDAsMCwyLjc5Wm04OS4xMyw0VjE3LjA2SDYuODdWNi44MlpNNi44Nyw2OC4xOFYyMy44OEg4OS4xM3Y0NC4zWiIvPjxwYXRoIGQ9Ik0yOC4zMSwzMy42MSwxNS40Nyw0Ni4zNSwyOC4zMSw1OS4xYTEsMSwwLDAsMCwxLjQ0LDBoMGwzLjQyLTMuMzlhMSwxLDAsMCwwLDAtMS40M2gwbC04LTcuOTMsOC03LjkyYTEsMSwwLDAsMCwwLTEuNDNoMGwtMy40Mi0zLjM5QTEsMSwwLDAsMCwyOC4zMSwzMy42MVptMzQuMTYsNC44Miw4LDcuOTItOCw3LjkzYTEsMSwwLDAsMCwwLDEuNDJoMGwzLjQyLDMuMzlhMSwxLDAsMCwwLDEuNDQsMGgwTDgwLjE4LDQ2LjM1LDY3LjMzLDMzLjYxYTEsMSwwLDAsMC0xLjQ0LDBoMEw2Mi40NywzN0ExLDEsMCwwLDAsNjIuNDcsMzguNDNaTTM5LjU3LDU5LjI5LDQ0LDYxLjJhMSwxLDAsMCwwLDEuMzQtLjUzbDEwLjk0LTI1YTEsMSwwLDAsMC0uNTMtMS4zM2wtNC40My0xLjkxQTEsMSwwLDAsMCw1MCwzM0wzOSw1OEExLDEsMCwwLDAsMzkuNTcsNTkuMjlaIi8+PC9zdmc+
// @grant        none
// ==/UserScript==

(function() {
"use strict";

// ======================== CSS 功能開始 ========================
let css = `/* ======= CSS代碼 TOP ======= */


這里直接寫CSS代碼，即<style>……</style>標(biāo)簽里面內(nèi)容，支持換行與CSS注釋。


/* ======= CSS代碼 END ======= */`;
if (typeof GM_addStyle !== "undefined") {
  GM_addStyle(css);
} else {
  const styleNode = document.createElement("style");
  styleNode.appendChild(document.createTextNode(css));
  (document.querySelector("head") || document.documentElement).appendChild(styleNode);
}
// ======================== CSS 功能結(jié)束 ========================


})();

第二種：原生JS寫法

// ==UserScript==
// @name         腳本名稱
// @namespace    http://tampermonkey.net/
// @version      2018-08-18
// @description  腳本描述。
// @author       Tih
// @match        *://*/*
// @icon         data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NiA3NSI+PHBhdGggZD0iTTAsMi43OVY3Mi4yMUEyLjgsMi44LDAsMCwwLDIuODEsNzVIOTMuMTlBMi44LDIuOCwwLDAsMCw5Niw3Mi4yMVYyLjc5QTIuOCwyLjgsMCwwLDAsOTMuMTksMEgyLjgxQTIuOCwyLjgsMCwwLDAsMCwyLjc5Wm04OS4xMyw0VjE3LjA2SDYuODdWNi44MlpNNi44Nyw2OC4xOFYyMy44OEg4OS4xM3Y0NC4zWiIvPjxwYXRoIGQ9Ik0yOC4zMSwzMy42MSwxNS40Nyw0Ni4zNSwyOC4zMSw1OS4xYTEsMSwwLDAsMCwxLjQ0LDBoMGwzLjQyLTMuMzlhMSwxLDAsMCwwLDAtMS40M2gwbC04LTcuOTMsOC03LjkyYTEsMSwwLDAsMCwwLTEuNDNoMGwtMy40Mi0zLjM5QTEsMSwwLDAsMCwyOC4zMSwzMy42MVptMzQuMTYsNC44Miw4LDcuOTItOCw3LjkzYTEsMSwwLDAsMCwwLDEuNDJoMGwzLjQyLDMuMzlhMSwxLDAsMCwwLDEuNDQsMGgwTDgwLjE4LDQ2LjM1LDY3LjMzLDMzLjYxYTEsMSwwLDAsMC0xLjQ0LDBoMEw2Mi40NywzN0ExLDEsMCwwLDAsNjIuNDcsMzguNDNaTTM5LjU3LDU5LjI5LDQ0LDYxLjJhMSwxLDAsMCwwLDEuMzQtLjUzbDEwLjk0LTI1YTEsMSwwLDAsMC0uNTMtMS4zM2wtNC40My0xLjkxQTEsMSwwLDAsMCw1MCwzM0wzOSw1OEExLDEsMCwwLDAsMzkuNTcsNTkuMjlaIi8+PC9zdmc+
// @grant        none
// ==/UserScript==
(function() {
'use strict';
    
// ======================== CSS 功能開始 ========================
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `/* ======= CSS代碼 TOP ======= */


這里直接寫CSS代碼，即<style>……</style>標(biāo)簽里面內(nèi)容，支持換行與CSS注釋。


/* ======= CSS代碼 END ======= */`;
document.head.appendChild(style);
// ======================== CSS 功能結(jié)束 ========================


})();