将 CSS 注入网站

发布于 2024-11-28 12:50:45 字数 429 浏览 0 评论 0原文

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

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

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

#container div.note p

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

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

原文

I'm creating a browser extension that'll allow you to adjust the CSS of a page.
Basically, if the user decides on a dark background with light text then that change should reflect across the site that they are viewing.
The reason for this is readability.
People with colour blindness and some vision related disabilities find it difficult to read some colours.

There are several challenges with this.
I want to be able to change background-color elements to the chosen background colour and the color element to the chosen text-colour.

Obviously I have to account for complicated website layouts, and cater for those rules that are complicated, i.e.

#container div.note p

I can use Javascript in this, but no libraries like JQuery, so is there a way I can do this?

Is there a way I can apply a CSS Stylesheet to the page that will override every background element and every color element in their stylesheet?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一个人的夜不怕黑 2024-12-05 12:50:45

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

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

看看这篇文章：动态加载外部 JavaScript 和 CSS 文件

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

I suggest writing a GreaseMonkey script for this since it will allow you to set a rule to run on every page of a site. GM is just a wrapper for JavaScript (although it does extend the functionality as well).

And no, it wouldn't be hard to write a script that applies a CSS stylesheet. Just create a <link> element linking to it. Alternatively you could hard-code the style in and create a <style> object on the page.

Take a look at this article: 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

回复收藏 0 原文

~没有更多了~