Question

我试图创建一个JS Bookmarklet，当用户点击时，图像在页面上的绝对位置div中打开，当前只能查看我不知道如何查看。

我有以下

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：在它之前没有运气......

Answer 1

确保在制作bookmarklet时包装代码。

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)
})();

Answer 2

更优化的版本：

(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（append用于jQuery）。它是appendChild。
如果您想在动态创建的div下嵌套一些标记，只需使用innerHTML的{{1}}。无需再次使用div。
对于较长的createElement s，最好使用style，因为它是一个书签，您的代码必须占用尽可能少的空间。

Answer 3

您需要使用.appendChild()（而不是.append()），即

document.body.appendChild(newDiv);

这是working example。

Answer 4

尝试这样（造型等等，当然，一切都取决于你，这是一个例子）：

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);}())

这里显示出灿烂的阳光;）

Javascript Bookmarklet，点击即可打开图片

4 个答案: