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コードを試してください。

.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 に答える
1

要素の CSS 配置を「操作」する必要があります。実際、画像をどこに挿入するかは重要ではありませんが、どこに配置するかは問題ではありません。

要素を別の要素の隣に配置するための計算を自動化する jQuery プラグインである「next-to」を見てみたいと思うかもしれません。

例えば：

<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 に答える
0

まず、予約語であるため、CSS フロートが呼び出されますcssFloat(またはhtmlFloat一部のブラウザーでは) 。float第二に、 のようなfloat値はありませんblock。

第三に、あなたはその物件xに参加できませんでした。-10pxright

第 4 に、相対的な左右の位置を設定すると、予期しない動作が発生する可能性があります。

第 5 に、createAttribute属性ノードはすべてのブラウザーで信頼できるわけではないため、 を使用しないでください。代わりにsetAttribute、要素で使用してください。

第 6 に、これが機能した場合、検索している要素の周りのページ レイアウトが台無しになるためposition: absolute、フローに影響を与えないようにする方がよいでしょう。ただし、これを行う場合は、margin-left代わりにleft(他の方向でも同じ) を使用して要素を移動する必要があります。

私はそれが少なくとも仕事に近づくべきだと思う...

于 2012-04-04T15:12:35.820 に答える