Javascript Bookmarklet，點擊打開圖像

我試圖創建一個JS書籤，當用戶點擊時，圖像打開在頁面上的絕對位置div當前只查看我不知道如何。Javascript Bookmarklet，點擊打開圖像

我有以下

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)

和香港專業教育學院嘗試compressiing並添加JavaScript：之前沒有運氣...

來源

2012-06-14 Liam

什麼，如果有的話，實際上當你嘗試你的bookmarlet時會發生？ –

沒有任何反應@David – Liam

如果你使用Firefox，你有沒有嘗試在JavaScript暫存器（Shift + F4）中轉儲它？ –

嘗試像這樣（造型等爲着，當然，一切都取決於你，這是一個例子）：

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-14 12:50:26 KooiInc

確保你包裝你的代碼時，你在做的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) 
})();

來源

2012-06-14 12:23:10 pahan

仍然沒有運氣@pahan – Liam

@Liam編輯我的答案，現在試試 – pahan

更優化的版本：

(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 s最好使用setAttribute，因爲它是一個小書籤，您的代碼必須佔用儘可能小的空間。

來源

2012-06-14 12:30:18 Sepehr

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

document.body.appendChild(newDiv);

這裏有一個working example。

來源

2012-06-14 12:31:44 jabclab

Javascript Bookmarklet，點擊打開圖像

回答

相關問題