0

我正在开发一个 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/ - 我希望我的按钮以类似于那个红十字的方式工作。

4

3 回答 3

1

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

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

例如：

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

正如你在这个小提琴中看到的，我已经准备好了（包含插件本身）

http://jsfiddle.net/PvcNr/

你会得到这样的东西：

看截图

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

希望能帮助到你

于 2012-04-04T15:33:17.057 回答
1

试试这样的 CSS 代码：

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

然后将“.my-ext-overlay”类名添加到您找到的每个元素中。

查看示例

于 2012-04-04T15:44:41.187 回答
0

首先，CSS 浮动被称为cssFloat（或htmlFloat在某些浏览器中），因为float它是一个保留字。float其次，不存在block.

第三，你错过x了房产-10px。right

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

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

第六，如果这确实有效，它会弄乱您正在搜索的元素周围的页面布局，所以最好position: absolute不要影响流程。但是，如果您这样做，您应该使用margin-left而不是left（其他方向相同）来移动元素。

我认为这至少应该让事情接近工作......

于 2012-04-04T15:12:35.820 回答