如何使用 Greasemonkey/Tampermonkey 脚本更改类 CSS?
Posted
技术标签:
【中文标题】如何使用 Greasemonkey/Tampermonkey 脚本更改类 CSS?【英文标题】:How to change a class CSS with a Greasemonkey/Tampermonkey script? 【发布时间】:2013-10-23 12:31:08 【问题描述】:我正在尝试设置主体的背景图像,但仅限于使用类 banner_url
的地方。 html如下:
<body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1">
基本上,我想强制页面使用以下 CSS:
.banner_url
background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
我正在尝试使用 Greasemonkey 来做这件事,如果它有什么不同的话。有谁知道我该怎么做?我从以下开始,但运气不佳:
function randomBG()
document.getElementsByClassName("banner_url").style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')no-repeat center center fixed;";
randomBG();
【问题讨论】:
【参考方案1】:这样的事情怎么样?
document.getElementsByClassName("banner_url")[0] .style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')";
但我必须承认我不确定是否理解这个问题
【讨论】:
基本上我想用javascript强制把上面的css放到页面里 以上工作,但是需要能够设置其余的css。设置背景图像的参数会使其无法正常工作。 你有多少种不同的背景?是否可以将它们以某种方式列在 CSS 文件中,或者该列表是从服务器加载的动态内容?我自己并不喜欢 GreaseMonkey,所以我不知道它会走多远。在“普通”HTML+CSS 中,我的回答应该只对背景图像有影响,而保留 css 文件中指定的所有其他属性【参考方案2】:为此,只需使用 CSS 级联。使用GM_addStyle()
向页面添加样式表。
注意:
!important
标志来覆盖某些潜在的冲突。
使用@run-at document-start
(或使用Stylus,见下文)可最大限度地减少与初始渲染后更改样式相关的“闪烁”。
完整的脚本:
// ==UserScript==
// @name _Override banner_url styles
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.banner_url
background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
` );
请注意,如果您使用的是 Greasemonkey 4,它会破坏GM_addStyle()
(以及许多其他内容)。强烈建议您切换到 Tampermonkey 或 Violentmonkey。
事实上,Greasemonkey 的控制开发者says as much himself。
与此同时,对于那些坚持使用 GM4 的受虐狂来说,这里是一个 shim:
function GM_addStyle (cssStr)
var D = document;
var newNode = D.createElement ('style');
newNode.textContent = cssStr;
var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
targ.appendChild (newNode);
另外,对于纯 CSS 操作,Stylish Stylus extension 是比 Greasemonkey/Tampermonkey 更好的选择。
【讨论】:
谢谢。我没有意识到这是可能的!我实际上有一些 javascript 来随机化图像,所以我需要使用 GM。会试一试,让你知道! 好的,这行得通。但是出于兴趣,您知道我将如何在纯 javascript 中使用 -o-background-size 等元素吗? 注意一定要在文件顶部加上// @grant GM_addStyle
!
@TylerH,废话,我没有改变用户的意图,也没有使任何答案无效。那是因为这个问题同样适用于 Tampermonkey,因为 Tampermonkey 已经存在,BY DESIGN。请不要在您的专业知识之外重新标记/编辑。
@BrockAdams 标签分数并不涵盖用户知道或使用甚至感兴趣的所有技术。网站上没有规定说没有标签分数就不允许您了解某事在里面。以上是关于如何使用 Greasemonkey/Tampermonkey 脚本更改类 CSS?的主要内容,如果未能解决你的问题,请参考以下文章
如何在自动布局中使用约束标识符以及如何使用标识符更改约束? [迅速]
如何使用 AngularJS 的 ng-model 创建一个数组以及如何使用 jquery 提交?