javascript - 如何使用 JQuery 更改网页外观？

Question

我想创建 JQuery 脚本来改变 html 页面的外观。我在此示例中的目标是使用黑色背景和白色文本以及大号宽字体。

$("<style type='text/css'> body, div, p, li { background-color: black; color:white; font-family:\"Arial Black\"; font-size: 20px; font-weight:bold; font-size:28px;} </style>").appendTo("head");

我正在开发这个作为 webextension 的一部分和我在这个页面上应用的示例页面:

https://www.mozilla.org/en-US/

(注意:您不会在那里找到我的代码，上面的网站是要更改的主题或目标)

以下是可选的 - 仅当有人想将 JQuery 代码作为扩展进行测试时:

如果你想使用我的扩展程序检查 Mozilla 站点，你需要 manifest.json

{
"description": "Changes the webpage",
"manifest_version": 2,
"name": "Facilitate my work",
"version": "1.0",
"homepage_url": "https://www.mozilla.org/en-US/",
"icons": {
"48": "icons/border-48.png"
},
"applications": {
"gecko": {
"id": "facil070716",
"strict_min_version": "45.0"
}
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": [
  "scripts/jquery-3.0.0.js",
  "scripts/change_DOM.js"]
}
]
}

和两个脚本 - jquery 从这里下载: https://code.jquery.com/jquery-3.0.0.js和包含 JQuery 代码的 change_DOM.js。

您可以将其添加到 Addons Debuger在 Firefox 45 及更高版本中

所以当我在 Mozilla 站点上应用 Jquery 代码时，我可以看到:

看起来有一些大图像，但这些区域是 li 元素(绿色、紫色、蓝色和橙色矩形)。例如。应用于绿色 li 的样式是:

.promo-large-landscape.encryption {
    background: #6fbe4a;
}

我希望它是黑色的，但由于某种原因，我的样式 li 没有应用。

那么问题来了，如何让网页全黑，而文字却是白色。

另外，如果你能给我提示如何检测这样的情况:有很大的矩形正在占用空间，我希望它们被删除 - 那么如何检测它们。它可能只是一个添加，但它占用了屏幕上的大部分空间，所以我想检测它。该算法必须是通用的，这样我就可以将它应用到任何网站，而不仅仅是 Mozilla。

更新:我正在使用的当前代码是这样的:

$('body, h1, h2, h3, h4, h5, div, p, ul, li').css({'background-color': 'black', 'color':'#f7fab0', 'font-family':'Arial Black', 'font-size': '20px', 'font-weight':'bold', 'font-size':'28px', 'padding-left':'0px', 'padding-right':'0px'});

Answer 1

您可以使用 jQuery .css 函数:

$('body, div, p, li').css({'background-color': 'black', 'color':'white', 'font-family':'Arial Black', 'font-size': '20px', 'font-weight':'bold', 'font-size':'28px'});

在您的代码中，将 .appendTo("head") 部分更改为 .appendTo($("head")):

$("<style type='text/css'> body, div, p, li { background-color: black; color:white; font-family:\"Arial Black\"; font-size: 20px; font-weight:bold; font-size:28px;} </style>").appendTo($("head"));