div創建的JavaScript不接受通過javascript輸入的css數據

Question

我使用javascript創建了div'egg'，然後嘗試使用jquery設計樣式。但是，這並沒有奏效。可有人請解釋爲什麼

egg = document.createElement('div'); 
$('#egg').css('background-color', 'blue'); 
$('#egg').css('height', '200px'); 
$('#egg').css('width', '200px'); 
$('#egg').css('position','absolute'); 
$('#egg').css('top','500px'); 

Answer 1

$('#egg')將試圖找到ID爲元素在DOM egg，但你有沒有在DOM附加egg元素呢。

另請注意，您尚未指定id屬性爲已創建的元素。

試試這個：

var egg = document.createElement('div'); 
 
egg.setAttribute('id', 'egg'); 
 
document.body.appendChild(egg); 
 
$('#egg').css('background-color', 'blue'); 
 
$('#egg').css('height', '200px'); 
 
$('#egg').css('width', '200px'); 
 
$('#egg').css('position', 'absolute'); 
 
$('#egg').css('top', '500px');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

var egg = document.createElement('div'); 
document.body.appendChild(egg) 
egg.id = "egg"; 
$("#egg").css('height',200);