javascript - 如何在Firefox扩展中的javascript中将div插入浏览器主体的顶部

我是firefox扩展的新手，不知道如何在javascript / content脚本中开发div等工具栏，并想将其固定在主体顶部（想将主体向下推）。请帮忙。

  var toolbarHeight = 40;

   var div = document.createElement("div");
   div.id = "myToolbar";
   div.textContent = "  ";
   var st = div.style;
   st.display = "block";
   st.top = "0px";
   st.left = "0px";
    st.width = "100%";
     st.height = toolbarHeight + "px";
   st.background = "#F0F0F0";
   st.color = "grey";
   st.fontStyle = "italic";
   st.position = "fixed";
    document.body.style.webkitTransform = "translateY(" + toolbarHeight + "px)";
    document.documentElement.appendChild(div);

最佳答案

**** 2更新：**

I have seen update this works but div also moves with body
because document.documentElement.appendChild(div);

is not working and with document.body.insertBefore(div, document.body.firstChild);
div also moves down becuase of inserting in body

这是正常现象，因为您在body中分配了样式

document.body.style.webkitTransform =         // Chrome, Opera, Safari  document.body.style.msTransform =           // IE 9  document.body.style.transform = "translateY(" + toolbarHeight + "px)";

问题是风格。

现在有一种可能性，您不将样式分配给<body>，而仅将其分配给<div>，并且可以在body内部创建两个<div>。

注意您不能在文件HTML中创建两个<body>，因为它是有效的文档HTML INFO

第一个<div>是我们讨论的脚本的创建，而<body>中其余的<div>则是其他脚本的创建。
最后，您可以使用

document.getElementById("idofdiv").style.webkitTransform =document.getElementById("idofdiv").style.msTransform =document.getElementById("idofdiv").style.transform = "translateY(" + toolbarHeight + "px)";

在div上分配样式

我对最后一条评论感到震惊。
****更新：**
通过评论，我了解您的问题。
我复制新的脚本并将其粘贴到我的笔记本上。
我在Firefox和Chromium（这是Ubuntu上的Chrome的名称）上打开文件HTML。
您可以在imguru上看到输出和差异。
现在问题只在document.body.parent.style.webkitTransform='translateY(40px)';

我发现为什么不起作用，并且Firefox，IE和OPERA不支持此功能。
您在site上看到

现在我用

document.body.style.webkitTransform =         // Chrome, Opera, Safari
  document.body.style.msTransform =           // IE 9
  document.body.style.transform = "translateY(" + toolbarHeight + "px)";

在Chrome上输出是相等的。 IMGURU

旧：

我带你剧本，在笔记本上工作。

代码中的document.body.parent.style.webkitTransform='translateY(40px)';上有错误，错误是：

TypeError: document.body.parent is undefined

这是我不知道的，我删除了。
现在我在TypeError: document.body is null上还有其他错误var div = document.createElement("div");
我在Google上搜索并修复了this
现在，在脚本内插入window.onload{ }，并插入用于下推主体的标签。

<script type="text/javascript">
  window.onload = function() {
  //document.body.parent.style.webkitTransform ='translateY(40px)';
  var div = document.createElement("div");
  var br=document.createElement("br");
  div.id="divs";
  div.style.display='block';
  div.style.width = "600px";
  div.style.height = "100px";
  div.style.background = "#C2E2FF";
  div.style.color = "grey";
  div.innerHTML = "my div";
  document.body.insertBefore(br, document.body.firstChild);
  document.getElementById("divs").style.fontStyle = 'italic';
  document.getElementById("divs").style.position = "fixed";

  }</script>

输出未查看主体，因为style =“ fixed”上的错误（我说是错误，但这不是错误），因为“替换”了（该元素相对于浏览器窗口定位）。
我删除它，输出正确。

我认为您的位置有问题，建议您使用Firebug（firefox和chrome的工具）查找错误

有关您在此site上的位置的信息

最终DEMO