Question

我是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);

Answer 1

**** 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上打开文件HTML（这是Ubuntu上Chrome的名称）。您可以在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

<强> OLD：

我带着你的脚本并在笔记本上工作。

在代码内部document.body.parent.style.webkitTransform='translateY(40px)';出错，错误是：

TypeError: document.body.parent is undefined

我不知道那是和我删除。现在TypeError: document.body is null上有其他错误var div = document.createElement("div"); 我搜索谷歌并修复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

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

1 个答案: