Question

我有一个Tampermonkey脚本供个人在网站上运行。它的主要功能是在服务器上运行ajax搜索，所以我不必手动执行它们这就是为什么我用他们的脚本在他们的服务器上运行页面，而不是从头开始创建它。我不得不遇到很多跨站点限制问题。

// ==UserScript==
// @name         Ajax searcher
// @version      1
// @include      https://theirserver.com/?joeysquerystringhere
// @grant        GM_log
// @grant        GM_setClipboard
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @require      https://code.jquery.com/jquery-3.1.0.min.js
// ==/UserScript==

$("head").empty();
$("body").empty();
$("body").append (`

//All of my HTML is in here and working properly

                  `);


document.getElementById("myButton1").style.backgroundColor = "red";
document.getElementById("myButton2").style.backgroundColor = "red";
document.getElementById("myButton3").style.backgroundColor = "initial";

//All of my javascript is in here and working properly

GM_addStyle('td { padding: 5px; text-align: center; }');

var link = window.document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://www.w3schools.com/w3css/4/w3.css';
document.getElementsByTagName("HEAD")[0].appendChild(link);

我的CSS有点失控。我有

HTML标记内的内联样式，位于$（'body'）。apend
我正在使用javascript编辑一些css，你可以在下面看到
我有GM_addStyle（''）
我也有样式表，其中包含对w3网站的引用

我认为这些中唯一真正重要的是样式表，因为它有我需要的w3类。我想知道我是否应该把所有东西放在那里或者如果一种方式优于另一种方式。它只是我和一些为我工作的人正在使用它所以它不需要看起来不可思议它只需要快速。 javascript有一堆xmlhttpRequest，我需要尽可能快地工作。即使慢几毫秒也是不可接受的。我的问题是在这种类型的脚本中构造CSS的最佳方法是什么？是我习惯的方法清空页面html并插入我自己的可接受的？

Answer 1

尝试并使用Key：值对，例如：

[ { property: "propertyValue" }, { color: "red" } ]

例如，使用循环来设置DOM元素的样式优点：您为目标元素创建了小型可重用容器。

在Tampermonkey脚本中插入CSS的最佳方法是什么？

1 个答案: