0

我试图创建一个 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: 在它之前没有运气......

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

更优化的版本：

(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只需使用. 无需再次使用。innerHTMLdivcreateElement
  • style最好使用long setAttribute，因为它是一个书签，并且您的代码必须占用尽可能少的空间。
于 2012-06-14T12:30:18.583 回答
0

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

document.body.appendChild(newDiv);

这是一个工作示例。

于 2012-06-14T12:31:44.293 回答
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 回答