0

ユーザーがクリックすると、現在表示されているページの絶対位置の div に画像が表示される JS ブックマークレットを作成しようとしていますが、その方法はわかりません。

私は次のものを持っています

newDiv=document.createElement("div");
var img=document.createElement('img');
img.src='http://www.dannemann.com/images/lensflarePhilosophy.png';
newDiv.appendChild(img);
my_div=document.body("org_div1");
document.body.append(newDiv)

そして、それを圧縮してJavascriptを追加しようとしました：運がない前に...

4

4 に答える 4

0

ブックマークレットを作成するときは、コードをラップしていることを確認してください。

javascript:(function(){
   newDiv=document.createElement("div");
   var img=document.createElement('img');
   img.src='http://www.dannemann.com/images/lensflarePhilosophy.png';
   newDiv.appendChild(img);
   var bodyTag = document.getElementsByTagName('body') [0];
   bodyTag.appendChild(newDiv)
})();
于 2012-06-14T12:23:10.677 に答える
0

このように試してみてください（スタイリングなどはもちろん、すべてあなた次第です。これは一例です）：

javascript:(function(){var newDiv,img;
if (!document.querySelector('#imgoverlay')){
 newDiv =  document.createElement("div");
 newDiv.id = 'imgoverlay';
 document.body.appendChild(newDiv);
 with (newDiv.style){
   position = 'absolute';
   top: '0';
   bottom = '0';
   left = '0';
   right = '0';
   textAlign = 'center';
 }
} else {
 newDiv = document.querySelector('#imgoverlay');
}
newDiv.innerHTML = '';
img = new Image();
img.style.margin = '0 auto';
img.style.verticalAlign = 'middle';
img.src ='http://www.dannemann.com/images/lensflarePhilosophy.png';
newDiv.appendChild(img);}())

ここでは明るい太陽が見えました ;)

于 2012-06-14T12:50:26.303 に答える
0

より最適化されたバージョン:

(function(){var d=document.createElement('div');d.innerHTML='<img src=\'http://www.dannemann.com/images/lensflarePhilosophy.png\' />';d.setAttribute('style','position:absolute;top:0;left:0;width:100%;height:100%;background:#666');document.body.appendChild(d);})()

読み取り可能:

var d = document.createElement('div');
d.innerHTML = '<img src=\'http://www.dannemann.com/images/lensflarePhilosophy.png\' />';
d.setAttribute('style','position:absolute;top:0;left:0;width:100%;height:100%;background:#666')
document.body.appendChild(d);

どうぞ：

(function(){var div=document.createElement('div');var a=div.style;div.innerHTML='<img src=\'http://www.dannemann.com/images/lensflarePhilosophy.png\' />';a.position='absolute';a.top=0;a.left=0;a.width='100%';a.height='100%';a.background='#666';document.body.appendChild(div);})()

読み取り可能なバージョン:

var div = document.createElement('div');
var a = div.style;
div.innerHTML = '<img src=\'http://www.dannemann.com/images/lensflarePhilosophy.png\' />';
a.position = 'absolute';
a.top = 0;
a.left = 0;
a.width = '100%';
a.height = '100%';
a.background = '#666';
document.body.appendChild(div);

いくつかのポイント：

  • 他の人が言ったように、メソッドはそうではありませんappend（appendjQuery用です）。ですappendChild。
  • 動的に作成されたタグの下にいくつかのタグをネストしたい場合は、それをdiv使用するだけinnerHTMLですdiv。再度使用する必要はありませんcreateElement。
  • styleこれsetAttributeはブックマークレットであり、コードが消費するスペースをできるだけ少なくする必要があるためです。
于 2012-06-14T12:30:18.583 に答える
0

.appendChild()（ではなく）使用する必要があります.append()。つまり、

document.body.appendChild(newDiv);

これが実際の例です。

于 2012-06-14T12:31:44.293 に答える