由javascript创建的div不接受通过javascript输入的css数据

Question

我创造了div＆＃39; egg＆＃39;使用javascript，然后尝试使用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')会尝试在DOM中找到ID为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);