通過javascript創建div框

-1

我正在嘗試此代碼，但它不工作。請幫助。在這個我只想創建一個div塊並改變它的屬性？通過javascript創建div框

<html> 
<head> 
<script > 
function create() 
{ 
l=document.createElement('div'); 
l.id='10'; 
l.style.position='absolute'; 
l.style.top='100px'; 
l.style.left='200px'; 
l.style.height='100px'; 
l.style.width='100px'; 
l.style.backgroundColor='yellow'; 
l.style.zIndex='100'; 
} 
</script> 
</head> 
<body> 
<input type="submit" name="cssandcreate" id="cssandcreate" value="css" onclick="create()"/> 
</body> 
</html>

來源

2014-04-19 user2828274

「它不工作」並不算是錯誤描述。發生了什麼呢？ –

@JanDvorak沒有任何事情發生，OP顯然是試圖添加一個對象到DOM。 – Jonathan

@Jonathan我明白了，但提問者應該告訴我們。我們不應該被要求猜測。也許我們除了邏輯錯誤之外還錯過了一個錯字？ –

您不能只是創建元素並等待它出現，您還應該將其添加到DOM。

例子：

document.body.appendChild(l);

來源

2014-04-19 11:30:22 potashin

應該是'document.body.appendChild（l）;' – Jonathan

@Jonathan：謝謝！我更新了我的帖子。 – potashin

@ user2828274：你成功了嗎？ – potashin

嘗試這樣的事情

function createDiv() { 
     var divTag = document.createElement("div"); 
     divTag.id = "div1"; 
     divTag.className = "divdrag"; 

     par = document.getElementById('stage'); 

     par.insertBefore(divTag, par.firstChild); 
    } 

    createDiv();

CSS

.divdrag{ 
      width:688px; 
      position:relative; 
      margin-top:20px; 
      display:inline-block; 
      height:50px; 
      border: 1px solid red; 

     } 
     .divdrag:hover{ 
     -webkit-box-shadow: 1px 1px 3px #999; 
     box-shadow: 1px 1px 3px #999; 
     border:0.7px dotted; 
      }

看看小提琴http://jsfiddle.net/3ZPEy/1/

來源

2014-04-19 11:31:26 Richa

HTML

<input type="button" name="cssandcreate" id="cssandcreate" value="css" onclick="create()"/>

function create() { 
    var l = document.createElement('div'); 
    l.id = '10'; 
    l.style.position = 'absolute'; 
    l.style.top = '100px'; 
    l.style.left = '200px'; 
    l.style.height = '100px'; 
    l.style.width = '100px'; 
    l.style.backgroundColor = 'yellow'; 
    l.style.zIndex = '100'; 
    document.body.appendChild(l); 
}

來源

2014-04-19 11:33:35 Jonathan

通過javascript創建div框

回答

相關問題