javascript - 在任何 DOM 元素旁边插入 Logo

Question

我正在开发一个 Firefox 扩展，它可以修改加载网页的内容。首先，我选择“src”或“href”属性与我的正则表达式匹配的所有元素(这部分代码有效)。

然后，我想使用以下代码在找到的元素的父元素的右上角放置一个小图像:

    /* create and add attributes to image */
var img = window.content.document.createElement("img");
var b = window.content.document.createAttribute("src");
b.nodeValue = "chrome://plugin/content/agent.png";
img.setAttributeNode(b);
img.addEventListener("click", function(){ alert("ds"); });
img.style.display = "block";
img.style.border = "3px solid red";
img.style.position = "relative";
img.style.top = "-10px";
img.style.right = "-10px";
img.style.left = "20px"; 

//...返回元素的代码...

//now insert the image
$jq(img).appendTo(element.parentNode);

当前的结果是图像要么仅显示在元素父元素的底部，要么根本不显示。

如果你看看这个:http://jsfiddle.net/yzwh5/64/ - 我希望我的按钮能够以与红十字类似的方式工作。

Answer 1

您必须“玩弄”元素的 CSS 定位，事实上，在哪里插入图像并不重要，重要的是您将它们放置在哪里。

也许您想看看“next-to”，这是一个 jQuery 插件，它可以自动计算以将一个元素定位到另一个元素旁边

例如:

<script type="text/javascript">
  $('.PlaceThisDiv').nextTo($('.ThisOtherDiv'), {position:'right', shareBorder:'top'});
</script>

正如你在我准备的 fiddle 中看到的(包含插件本身)

http://jsfiddle.net/PvcNr/

你会得到这样的东西:

更多信息:https://code.google.com/p/next-to/

希望对你有帮助