在任何DOM元素旁边插入徽标

我正在开发一个Firefox扩展，用于修改加载的网页的内容。首先，我选择“src”或“href”属性与我的正则表达式匹配的所有元素（代码的这部分工作）。在任何DOM元素旁边插入徽标

然后，我想在使用下面的代码中发现了元素的父的右上角放置一个小图片：

/* 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/ - 我希望我的按钮能以类似于红十字的方式工作。

来源

2012-04-04 Jessica Stansfield

首先，因为float是保留字，所以CSS浮点数被称为cssFloat（或在某些浏览器中为htmlFloat）。其次，没有这样的float值作为block。

三，您错过x-10px为right财产。

第四，设置相对的左右位置可能会导致意外的行为。

第五，您不应该使用createAttribute，因为属性节点在所有浏览器中都不可靠。请在元素上使用setAttribute。

第六，如果这确实起作用，它会弄乱搜索到的元素周围的页面布局，因此您最好使用position: absolute，以免影响流量。但是，如果您这样做，则应该使用margin-left而不是left（对于其他方向相同）来移动元素。

我认为至少应该接近工作的事...

来源

2012-04-04 15:12:35

这是我用这么多的解决方案之一。我修改了你的建议，但仍然没有喜悦。任何其他建议/解决方案如何解决这个问题？ – 2012-04-04 15:25:19

必须“玩”元素的CSS定位，其实并不重要，你在哪里插入图像，但其中你确实定位它们。

也许你想看看“下到”，它可以自动计算一个jQuery插件来定位一个元素旁边另一个元素

例如：

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

正如你可以在这个小提琴我准备看（包含插件本身）

http://jsfiddle.net/PvcNr/

你会得到你的东西LIK E本：

See screenshot

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

希望它可以帮助

来源

2012-04-04 15:33:17

尝试CSS代码：

.my-ext-overlay:after { 
    content:url(smiley.gif); 
    position: absolute; 
    margin-left: -16px; margin-top: -16px; 
}

，然后添加”。我的 - 外部 - 覆盖“类名到你找到的每个元素。

见example

来源

2012-04-04 15:44:41 Yuval

在任何DOM元素旁边插入徽标

回答

相关问题