当前位置: 首页 > 面试题库 >

如何使用Greasemonkey / Tampermonkey脚本更改类CSS?

茅慈
2023-03-14
问题内容

我正在尝试设置主体的背景图像,但是仅在使用class的地方设置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();

问题答案:

为此,只需使用CSS级联。使用将样式表添加到页面GM_addStyle()
注意:

  • 我们使用该!important标志来覆盖某些潜在的冲突。
  • 使用@run-at document-start (或使用手写笔,请参见下文)以最小化与初始渲染后更改样式相关的“闪烁”。

完整的脚本:

// ==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的控制开发人员[本人也这么说。

同时,对于那些坚持使用GM4的受虐狂来说,这是一个垫片:

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);
}


 类似资料:
  • 问题内容: 使用javascript设置内联CSS值很容易。如果我想更改宽度,并且我有这样的html: 我需要做的是: 它将更改内联样式表的值。通常这不是问题,因为内联样式会覆盖样式表。例: 使用此Javascript: 我得到以下内容: 这是一个问题,因为当我有以下条件时,不仅要更改内联值,而且要在设置宽度之前先查找宽度: 返回的值为Null,因此,如果我有Javascript需要知道某种东西的

  • 问题内容: 我正在尝试设置回合部署脚本。我在使用远程登录时遇到了一些麻烦。在远程服务器上创建数据库时,我们需要使用sql帐户(而不是计算机或域,这是针对Server 2008 R2 SP1上的MSSQL 2008R2)登录。有没有办法为回旋连接和运行脚本提供不同的凭据,因为我在文档中没有看到它?谢谢。 问题答案: 如果指定连接字符串而不是服务器名称和数据库名称,则还可以设置凭据。 来自:https

  • Hi下面是我的bash脚本。它需要一个源文件和一个令牌文件,令牌文件包含servicename:用法我必须在源文件中逐行查找servicename,如果找到,然后计算内存使用量,然后用-Xmx\d{1,3}m更改-Xmxm。在下面的脚本粗线解释做什么多简单你可以先下站问题从下面的小部分脚本 那么上面的错误是什么

  • 问题内容: 我正在尝试制作一个将用作荧光笔的javascript小书签,当按小书签时,将网页上所选文本的背景更改为黄色。 我正在使用以下代码来获取选定的文本,并且工作正常,返回正确的字符串 } 但是,当我创建了一个类似的函数来使用jQuery更改所选文本的CSS时,它不起作用: } 有任何想法吗? 问题答案: 最简单的方法是使用,该命令具有在所有现代浏览器中更改背景颜色的命令。 以下应该在任何选择

  • 我试图将一个非常小的项目(可以通过拖放重新排列的数据列表)从通常的PHP、mysqli和ajax“转换”为使用MeekroDB。 它以其原始形式运行良好(这是Ajax使用的小型PHP文件): 但现在我正在尝试使用Meekrodb时却什么也不做: JavaScript/jQuery脚本不变。当然,我已经更新了列表最初是如何从数据库中提取并在站点上显示的,这就很好地工作了。我也仍然可以拖动东西,但它从

  • 问题内容: 谁能帮助我,我有两个问题。 我想做的是使用jQuery动态更改CSS类规则。 在上面的示例中,我有一个现在使用jQuery 命名的类,我想仅通过不添加css内联来更改字体大小,而不更改颜色。 我要创建更改并将其保存到文件,请记住,将存在完整的样式表或没有类名将保存在文件中。 我该怎么做才是最简单,更好的方法? 谢谢! 问题答案: 据我所知,没有jQuery的方法可以做到这一点。可能有一