Element's CSS, reverts back at the end of page load?

问题

I am trying to change the position of

<div class="BannerRedesign" id="Banner" style="position: fixed ! important; height: 36px ! important; width: 100% ! important;">
    <div class="BannerCenterContainer" id="NavigationRedesignBannerContainer">

(roblox banner element, trying to make it not float) to relative using Greasemonkey, with all privileges enabled. But, every time, at the end of the loading of the document, it reverts to floating.

I even tried appending bannercentercontainer to a different element, but I don't know if I did it right... can you please help me change this to relative position?

I tried:

$('#Banner').css('position', 'relative !important')

and

if ($('#Banner').css('position') == 'fixed') {
$('#Banner').css('position', 'relative')
}

, but it just changed back once the page finished loading.

回答1:

That banner is probably set in the static HTML and periodically reset by AJAX.

One way to fix it is with the waitForKeyElements() utility.

Here is a complete script that will work on the code given in the question:

// ==UserScript==
// @name     _Unfix annoying banner
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements ("#Banner", unFixThePositioning);

function unFixThePositioning (jNode) {
    jNode.css ('position', 'relative');

    //-- Or, for a little extra "Oomph":
    jNode[0].style.setProperty ("position", "relative", "important");

    return true;    //-- Check repeatedly.
}

来源：https://stackoverflow.com/questions/14618541/elements-css-reverts-back-at-the-end-of-page-load

标签

jquery

css

dynamic

greasemonkey

roblox