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元素，但是您尚未在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);