javascript - 由javascript创建的div不接受通过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') 将尝试在 DOM 中查找 id 为 egg 的元素，但您尚未附加 egg 元素在 DOM 中。

另请注意，您尚未为创建的元素指定 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>