Question

我正在开发一个插件，并希望在左侧添加任何页面div，就像控制台一样。我看过CSS样式，但是在greasymonkey上测试插件并不总是向我展示div，我该怎么办？

我正在使用的CSS代码是：

var div_console = document.createElement("div");
div_consola.id = "div_consola";
div_consola.style.cssText = "overflow:scroll;
z-index:300;position:fixed;left:0px; width: auto; 
height: 100%;  border: solid 1px #e1e1e1;
vertical-align: middle;   background:  #ffdab9;text-align: center;";
var body = document.getElementsByTagName('body')[0];
body.appendChild(div_consola);

因此，在加载任何页面时，我使用Javascript添加此div，然后填充数据。

任何帮助？

谢谢！

Answer 1

div_consola.id =＆＃34; div_consola＆＃34 ;;

div.setAttribute（＆＃34; id＆＃34;，＆＃34; div_consola＆＃34;）; ＆lt; ------尝试使用setAttribute设置Id。

编辑：使用相同的Id名称和变量名称也是问题之一。当我在代码中更改变量名称时，它运行正常。

var div_consola = document.createElement（＆＃34; div＆＃34;）; var div = document.createElement（＆＃34; div＆＃34;）; ＆lt; ------变量名称已更改

Answer 2

有几件事：

你在变量名中有拼写错误。我认为您的意思是div_console而不是div_consola
您假设z-index为300就足够了，这可能是也可能不是。页面可以选择实现301的z-index。

你的css的其余部分是否适用于你想要影响的div？

Answer 3

您已指定

overflow: scroll;
width: auto;

取决于你的浏览器，也许你的div有一个未定义的大小和弹出的滚动条隐藏你的div。当我在jsFiddle上尝试你的代码时发生了什么事。

这是我将其更改为

时的结果

overflow : hidden;
width: 50px;

JsFiddle

编辑：如果它没有解决您的问题，请不要在它不起作用的情况下确定条件（浏览器等）？

在任何页面的左侧添加div

3 个答案: