Javascript 书签，单击时打开图像

Javascript Bookmarklet that opens image on click

本文关键字：图像 单击 书签 Javascript      更新时间：2023-09-26

我试图创建一个JS书签，当用户单击时，图像会在页面上的绝对位置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：在它之前没有运气......

像这样尝试（当然，样式等完全取决于您，这是一个例子）：

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

这里阳光明媚，;)

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

document.body.appendChild(newDiv);

这是一个工作示例。

更优化的版本： 

(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下嵌套一些标签时，只需使用该div innerHTML，无需再次使用createElement。
  • 对于长期style最好使用 setAttribute ，因为它是一个书签，您的代码必须占用尽可能少的空间。
请确保在

制作书签时包装代码。 

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)
})();
相关文章：