元素的 CSS，在页面加载结束时恢复？答案

【问题标题】：Element's CSS, reverts back at the end of page load?元素的 CSS，在页面加载结束时恢复？
【发布时间】：2013-01-15 03:02:47
【问题描述】：

我正在尝试更改

的position

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

（roblox 横幅元素，试图让它不浮动）使用 Greasemonkey 到 relative，启用所有权限。但是，每次在文档加载结束时，它都会恢复为浮动状态。

我什至尝试将bannercentercontainer 附加到不同的元素，但我不知道我是否做得对... 你能帮我把它改成相对位置吗？

我试过了：

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

和

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

，但是页面加载完成后它又变回来了。

【问题讨论】：

元素并不顽固。您的代码很顽固！编辑标题并为问题提供有意义的标题
你为什么要改变位置 css... 你不应该改变 float:none; ?
您是否要等到 DOM 加载完毕后再运行您的 javascript？
不能在内联样式中使用important

标签： jquery css dynamic greasemonkey roblox

【解决方案1】：

该横幅可能设置在静态 HTML 中并由 AJAX 定期重置。

修复它的一种方法是使用the waitForKeyElements() utility。

这是一个完整的脚本，可用于问题中给出的代码：

// ==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.
}

【讨论】：