Javascript Greasemonkey中的按钮处理和图层可见性

我有一个我一直在为一个游戏制作的Greasemonkey脚本。这个想法是在一个div中包含游戏的信息，当点击页面上的按钮（由我的脚本添加）时，该div将弹出

我使用z-index是因为当我在游戏屏幕顶部显示div时，一些图像会显示出来。因此，基本上我需要做的是根据变量的值和/或按钮单击来更改div的z索引。然而，当我点击我的按钮时，我不能让我的div出现在前面

以下是我目前掌握的情况：

// ==UserScript==
// @name            Test Script
// @namespace       http://therealmsbeyond.com/
// @description     Test
// @include         an_include.js
// @include         another_include.js
// @require         json.js
// ==/UserScript==

var VERSION = 1;
var WEBSITEURL = 'http://therealmsbeyond.com/';
var SCRIPTNAME = 'Test';
var SENDINFODELAY = 600000;
var UPDATEDELAY = 604800000;

var ZINDEX_UNDER = -100;
var ZINDEX_OVER = 111111;

var Options = {
    'mapVisible' : false,
    'showHostile' : false,
    'showAlliance' : false,
    'showBookmarks' : false
}

function custom_setValue(k,v){
    GM_setValue(k,v);
}
function custom_getValue(k,dv){
    return(GM_getValue(k,dv));
}
function custom_deleteValue(k){
    GM_deleteValue(k);
}
function getSavedInfo(){
    return(custom_getValue('ajaxparams',null));
}
function getSavedServerId(){
    return(custom_getValue('sid'));
}

var e = document.createElement('div');
    var idAttr = document.createAttribute('id');
    var styleAttr = document.createAttribute('style');
    idAttr.nodeValue = 'shadow_map_container';
    styleAttr.nodeValue = 'background-color:white;top:150px;left:75px;position:absolute;height:600px;width:600px;';
    e.setAttributeNode(idAttr);
    e.setAttributeNode(styleAttr);

    var c = '<strong>This is the map window.</strong>';
    e.innerHTML = c;
    document.body.appendChild(e);

if(Options.mapVisible == true)
{
    document.getElementById('shadow_map_container').style.zIndex = ZINDEX_OVER;
}
else
{
    document.getElementById('shadow_map_container').style.zIndex = ZINDEX_UNDER;
}

function showHide()
{
    if(Options.mapVisible == true)
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_UNDER;
        Options.mapVisible = false;
    }
    else
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_OVER;
        Options.mapVisible = true;
    }
}

var btnStr = '<a class="navTab" target="_top" onclick="showHide();return false;" href="javascript:void(0)"><span>Shadow Mapper</span></a>';
var myNavContainer = document.getElementById('main_engagement_tabs');
var inner = myNavContainer.innerHTML;
var newStr = btnStr + inner;
myNavContainer.innerHTML = newStr;

/==UserScript==
//@name测试脚本
//@名称空间http://therealmsbeyond.com/
//@描述测试
//@include an_include.js
//@include另一个_include.js
//@require json.js
//==/UserScript==
var版本=1；
var-WEBSITEURL=http://therealmsbeyond.com/';
var SCRIPTNAME='Test'；
var SENDINFODELAY=600000；
var UPDATEDELAY=604800000；
var ZINDEX_低于=-100；
var ZINDEX_OVER=111111；
变量选项={
“mapVisible”：false，
"假",，
"秀联":假,，
“showBookmarks”：false
}
函数自定义_设置值（k，v）{
GM_设定值（k，v）；
}
函数自定义值（k，dv）{
返回值（GM_getValue（k，dv））；
}
函数自定义值（k）{
GM_值（k）；
}
函数getSavedInfo（）{
返回（custom_getValue（'ajaxparams'，null））；
}
函数getSavedServerId（）{
返回（自定义值（'sid'）；
}
var e=document.createElement（'div'）；
var idAttr=document.createAttribute（'id'）；
var styleAttr=document.createAttribute（'style'）；
idAttr.nodeValue='shadow_map_container'；
styleAttr.nodeValue='背景色：白色；顶部：150px；左：75px；位置：绝对位置；高度：600px；宽度：600px；'；
e、 setAttributeNode（idAttr）；
e、 setAttributeNode（styleAttr）；
var c='这是映射窗口。；
e、 innerHTML=c；
文件.正文.附件（e）；
如果（Options.mapVisible==true）
{
document.getElementById（'shadow\u map\u container'）。style.zIndex=zIndex\u OVER；
}
其他的
{
document.getElementById（'shadow\u map\u container'）。style.zIndex=zIndex\u UNDER；
}
函数showHide（）
{
如果（Options.mapVisible==true）
{
document.getElementById（'shadow\u map\u container'）。style.zIndex=zIndex\u UNDER；
Options.mapVisible=false；
}
其他的
{
document.getElementById（'shadow\u map\u container'）。style.zIndex=zIndex\u OVER；
Options.mapVisible=true；
}
}
var btnStr=''；
var myNavContainer=document.getElementById（'main_engagement_tabs'）；
var inner=myNavContainer.innerHTML；
var newStr=btnStr+内部；
myNavContainer.innerHTML=newStr；

这不是z索引问题，而是编码风格和事件侦听器问题

在Greasemonkey脚本中，不能以这种方式激活按钮

showHide（）

驻留在GM沙盒中，页面的JS无法通过点击

onclick

（应该避免使用内联JS的原因还有一个。）

在本例中，您可以如下方式激活链接：

function showHide()
{
    if(Options.mapVisible == true)
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_UNDER;
        Options.mapVisible = false;
    }
    else
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_OVER;
        Options.mapVisible = true;
    }
    return false;
}

var btnStr = '<a class="navTab" target="_top"><span>Shadow Mapper</span></a>';
var myNavContainer = document.getElementById('main_engagement_tabs');
var inner = myNavContainer.innerHTML;
var newStr = btnStr + inner;
myNavContainer.innerHTML = newStr;

var btn = document.querySelector (".main_engagement_tabs > a.navTab");
btn.addEventListener ("click", showHide, true);

函数showHide（）
{
如果（Options.mapVisible==true）
{
document.getElementById（'shadow\u map\u container'）。style.zIndex=zIndex\u UNDER；
Options.mapVisible=false；
}
其他的
{
document.getElementById（'shadow\u map\u container'）。style.zIndex=zIndex\u OVER；
Options.mapVisible=true；
}
返回false；
}
var btnStr=‘阴影映射器’；
var myNavContainer=document.getElementById（'main_engagement_tabs'）；
var inner=myNavContainer.innerHTML；
var newStr=btnStr+内部；
myNavContainer.innerHTML=newStr；
var btn=document.querySelector（“.main\u engagement\u tabs>a.navTab”）；
btn.addEventListener（“单击”，显示隐藏，为真）；

这不是z索引问题，而是编码风格和事件侦听器问题

在Greasemonkey脚本中，不能以这种方式激活按钮

showHide（）

驻留在GM沙盒中，页面的JS无法通过点击

onclick

（应该避免使用内联JS的原因还有一个。）

在本例中，您可以如下方式激活链接：

function showHide()
{
    if(Options.mapVisible == true)
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_UNDER;
        Options.mapVisible = false;
    }
    else
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_OVER;
        Options.mapVisible = true;
    }
    return false;
}

var btnStr = '<a class="navTab" target="_top"><span>Shadow Mapper</span></a>';
var myNavContainer = document.getElementById('main_engagement_tabs');
var inner = myNavContainer.innerHTML;
var newStr = btnStr + inner;
myNavContainer.innerHTML = newStr;

var btn = document.querySelector (".main_engagement_tabs > a.navTab");
btn.addEventListener ("click", showHide, true);

函数showHide（）
{
如果（Options.mapVisible==true）
{
document.getElementById（'shadow\u map\u container'）。style.zIndex=zIndex\u UNDER；
Options.mapVisible=false；
}
其他的
{
document.getElementById（'shadow\u map\u container'）。style.zIndex=zIndex\u OVER；
Options.mapVisible=true；
}
返回false；
}
var btnStr=‘阴影映射器’；
var myNavContainer=document.getElementById（'main_engagement_tabs'）；
var inner=myNavContainer.innerHTML；
var newStr=btnStr+内部；
myNavContainer.innerHTML=newStr；
var btn=document.querySelector（“.main\u engagement\u tabs>a.navTab”）；
btn.addEventListener（“单击”，显示隐藏，为真）；

您是否将div设置为相对定位或绝对定位？如果没有，z索引将不会对div产生影响。@OriginalSyn更新了上面的代码，以包括div本身的创建。是的，位置设置为绝对，如果我能让它工作，它会弹出游戏屏幕。我还应该补充一点，当我更改涉及的布尔选项变量时，我可以使div按我想要的方式显示。由于某些原因，我的按钮不起作用。您是否已将div设置为相对位置或绝对位置？如果没有，z索引将不会对div产生影响。@OriginalSyn更新了上面的代码，以包括div本身的创建。是的，位置设置为绝对，如果我能让它工作，它会弹出游戏屏幕。我还应该补充一点，当我更改涉及的布尔选项变量时，我可以使div按我想要的方式显示。不知什么原因，我的按钮坏了哈哈哈！我几乎完全是在检查GM中的正确语法时发现这个解决方案的。唯一的区别是我只是使用getElementById来获得所需的div。谢谢！哈哈哈！我发现这个解决方案几乎完全是在