我正在创建一个允许您调整页面 CSS 的浏览器扩展程序。
基本上,如果用户决定使用浅色文本的深色背景,那么这种变化应该反射(reflect)在他们正在查看的整个网站上。
这样做的原因是可读性。
患有色盲和某些视觉相关障碍的人难以辨认某些颜色。
这有几个挑战。
我希望能够将 background-color
元素更改为所选的背景颜色,并将 color
元素更改为所选的文本颜色。
显然我必须考虑复杂的网站布局,并迎合那些复杂的规则,即
#container div.note p
我可以在其中使用 Javascript,但没有像 JQuery 这样的库,所以我有办法做到这一点吗?
有没有一种方法可以将 CSS 样式表应用到页面以覆盖样式表中的每个背景元素和每个颜色元素?
最佳答案
我建议写一个 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
关于javascript - 将 CSS 注入(inject)网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6995889/