Question

我正在用js制作简单的2D太阳系。
我正处在绕太阳公转的行星很少，甚至很少有卫星绕转的阶段。
我想制作一个简单的脚本，该脚本将在我的行星当前绘制其轨迹的地方创建点。

所以我的代码如下：

var drawtime = setInterval(createdot,1000);
function createdot(){
var dot = document.createElement('div');
var dotleft = document.getElementById('earth').style.left;
var dottop = document.getElementById('earth').style.top;

dot.setAttribute(hight, '1000px');
dot.setAttribute(width, '1000px');
dot.setAttribute(position, absolute);
dot.setAttribute(background, '#FFFFFF');
dot.style.top = dottop +'px';
dot.style.left = dotleft +'px';
};

dotleft / top是地球的当前位置。

我是编程的新手，我也不知道这个主意是什么。我正在浏览互联网，尝试了几种方法，但没有一种起作用。如果您能帮助我并解释这一过程，那就太好了。谢谢

Answer 1

您需要为div分配一个ID，然后您可以执行以下操作：

var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';

此SO帖子here上提供了更多信息。

Answer 2

您要设置的属性实际上是样式：高度，宽度，位置和背景。注意下面对高度，宽度，位置和背景的更改。还要注意最后一行的添加，它将新元素注入到页面中，并附加到body标签作为示例。最后，如现在所写，它将不断在同一位置放置一个点，除非您有其他功能在四处移动。

var drawtime = setInterval(createdot,1000);
function createdot(){
    var dot = document.createElement('div');
  var dotleft = document.getElementById('earth').style.left;
  var dottop = document.getElementById('earth').style.top;

  dot.style.height = '10px';
  dot.style.width = '10px';
  dot.style.position = 'absolute';
  dot.style.background = '#c0c0c0';
  dot.style.top = dottop +'px';
  dot.style.left = dotleft +'px';

  document.body.appendChild(dot);
}

Answer 3

您的代码有几个问题。首先，您将setAttribute用于样式属性。其次，您应该使用parseInt style.left和style.top的地球元素。第三，如果您想同时setAttribute，则两个arguments都应为string。使用下面的代码

function createdot(){
    	var dot = document.createElement('div');
    	//convert style left and top int because it contains 'px'
    	var dotleft = parseInt(document.getElementById('earth').style.left);
    	var dottop = parseInt(document.getElementById('earth').style.top);
    	
    	dot.style.height = "100px";
    	dot.style.width = "100px";
    	dot.style.position = "absolute"
    	dot.style.backgroundColor = "red";
    	dot.style.top = dottop +'px';
    	dot.style.left = dotleft +'px';
    	//return the element
    	return dot;
    };
    //element is not stored in variable myDot
    let myDot = createdot();
    //adding it the <body> element
    document.body.appendChild(myDot);

<div id="earth" style="postion:absolute;top:200px;left:200px;"></div>

Answer 4

检查是否有起点。我不在使用地球位置，我会让您尝试实现它：）

var drawtime = setInterval(createdot,1000);
function createdot(){
var dot = document.createElement('div');
var dotleft = document.getElementById('earth').style.left;
var dottop = document.getElementById('earth').style.top;

 // you can apply css like this
dot.style.height = "10px";
dot.style.width = "10px";
dot.style.backgroundColor ="#ff0000";
dot.style.position ="absolute";


  // or like this
dot.style.cssText="height:10px;width:10px;position:absolute;background-color:red;";


  //SetAttribute do not work for css properties, 
 //and you also needed to put the values into strings

  //happend the element to the body
  document.body.appendChild(dot);
};

https://codepen.io/crocsx-the-styleful/pen/JxWWXm

如何使用JS将属性插入创建的div

4 个答案: