的JavaScript的createElement（），風格問題今天

我寫了這個功能：的JavaScript的createElement（），風格問題今天

function zoom(obj){ 
      var img = (!document.getElementById(obj))?false:document.getElementById(obj); 
      var fullImage = (img.getAttribute("image") == null)?false:img.getAttribute("image"); 
      if(!fullImage || !img) { return false; } 
      if(!document.getElementById("::img")) { 
      var ob = "<div id='::img' style='position:absolute;top:300px;left:300px;width:200px;height:200px;-moz-border-radius:100px;border:1px solid #ddd;-moz-box-shadow: 0px 0px 8px #fff;display:none;'></div>"; 
      document.write(ob);} 
      img.onmousemove = function(e) { 
      var x = Math.floor(((e.pageX-7) - (img.offsetLeft - 8)) * 100/img.width); 
      var y = Math.floor(((e.pageY-7) - (img.offsetTop - 8)) * 100/img.height); 
      x = (x>100)?100:(x<0)?0:x; 
      y = (y>100)?100:(y<0)?0:y; 
      var ob = document.getElementById("::img"); 
      ob.style.background = "url('" + fullImage + "') no-repeat"; 
      ob.style.display = 'block'; 
      ob.style.backgroundPosition = x + '% ' + y + '%'; 
      ob.style.left = e.pageX + "px"; 
      ob.style.top = e.pageY + "px"; 
      } 
      img.onmouseout = function() { document.getElementById("::img").style.display='none'; } 
     }

我試圖用的createElement（），並使用appendChild（）函數，而不是這樣的：
```
var ob = `""`; 
      document.write(ob);
```
但函數不起作用，如何使它與createElement（）一起工作。
是否有可能與一行代碼添加的所有風格，純JAVASCRIPT：

ob.style.background = "url('" + fullImage + "') no-repeat"; 
       ob.style.display = 'block'; 
       ob.style.backgroundPosition = x + '% ' + y + '%'; 
       ob.style.left = e.pageX + "px"; 
       ob.style.top = e.pageY + "px";

前瞻：JsFiddle

來源

2011-05-08 John

Works fine:

var obj = document.createElement('div'); 
obj.id = "::img"; 
obj.style.cssText = 'position:absolute;top:300px;left:300px;width:200px;height:200px;-moz-border-radius:100px;border:1px solid #ddd;-moz-box-shadow: 0px 0px 8px #fff;display:none;'; 

document.getElementById("divInsteadOfDocument.Write").appendChild(obj);

您還可以看到如何設置的CSS一氣呵成（使用element.style.cssText）。

我建議你使用一些更有意義的變量名稱，而不要對不同的元素使用相同的名稱。它看起來像你正在使用obj爲不同的元素（覆蓋函數中的值），這可能會造成混淆。

來源

2011-05-08 11:07:45

omg有趣，但我30分鐘前曾嘗試過同樣的事情，它沒有工作（我想我錯過了什麼）..多數民衆贊成爲什麼我用document.write ...謝謝 – John 2011-05-08 11:17:47

謝謝，它爲我工作。 – 2014-04-17 10:00:33

你需要調用appendChild功能追加您的新元素添加到DOM中的現有元素。

來源

2011-05-08 11:03:28 SLaks

yourElement.setAttribute("style", "background-color:red; font-size:2em;");

或者你可以寫元素作爲純HTML和使用.innerHTML = [raw html code] ......這是非常醜陋的，但。

在回答你的第一個問題，首先你使用var myElement = createElement(...);，然後你做document.body.appendChild(myElement);。

來源

2011-05-08 11:04:55 ninjagecko

我想你的意思是'appendChild'？ 'appendElement'不存在... – 2011-05-08 11:09:06

這在某些版本的Internet Explorer中不起作用。更安全的解決方案是使用'yourElement.style.cssText'。 – duri 2011-05-08 11:09:31

其他人給你關於appendChild的答案。

在未打開的頁面上調用document.write()第一次調用document.open()會清除文檔的全部內容（包括調用document.write的腳本），所以這樣做很少是個好主意。

來源

2011-05-08 11:10:44 RobG

的JavaScript的createElement（），風格問題今天

回答

相關問題