将 CSS 注入网站答案

【问题标题】：Injecting CSS into a website将 CSS 注入网站
【发布时间】：2011-08-09 12:04:27
【问题描述】：

我正在创建一个允许您调整页面 CSS 的浏览器扩展程序。
基本上，如果用户决定使用浅色文本的深色背景，那么该更改应反映在他们正在查看的网站中。
这样做的原因是可读性。
患有色盲和某些视力障碍的人发现有些颜色难以阅读。

这有几个挑战。
我希望能够将background-color 元素更改为选定的背景颜色，并将color 元素更改为选定的文本颜色。

显然我必须考虑复杂的网站布局，并满足那些复杂的规则，即

#container div.note p

我可以在其中使用 Javascript，但没有像 JQuery 这样的库，那么有什么方法可以做到这一点吗？

有没有一种方法可以将 CSS 样式表应用于页面，以覆盖样式表中的每个背景元素和每个颜色元素？

【问题讨论】：

是的，我想创建类似的东西。我希望能够创建一个简单的工具供其他人使用。

标签： javascript css readability

【解决方案1】：

我建议为此编写一个GreaseMonkey 脚本，因为它允许您设置在网站的每个页面上运行的规则。 GM 只是 JavaScript 的包装器（尽管它也扩展了功能）。

不，编写一个应用 CSS 样式表的脚本并不难。只需创建一个链接到它的<link> 元素。或者，您可以硬编码样式并在页面上创建 <style> 对象。

看看这篇文章：Dynamically loading external JavaScript and CSS files

function loadcssfile(filename){
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)

 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadcssfile("mystyle.css") ////dynamically load and add this .css file

【讨论】：