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);