当我尝试通过编程进行调整时，为什么DIV和跨越无效的值

所以我习惯了与Ruby和Java进行造型逻辑，但是我是前端和JavaScript的新手。而且，当我尝试使用getElementById或getElementsByClassName时，我对Divs和Divs和跨度不确定。当我不必仅仅调整背景或添加DIV时，我就不得不jerry-rig解决方案。

最新一期：

var stars = document.getElementById("starContainer");
function starz() {
  for ( let i = 1; i <= 60; i++){
    var newDiv = document.createElement('div');
    newDiv.style.position = "absolute";
    newDiv.className = "star";
    newDiv.style.height = "15px";
    newDiv.style.width = "15px";
    newDiv.style.color = "white";
    newDiv.innerHTML = "star";
    newDiv.style.borderRadius = "15px";
    newDiv.style.backgroundColor = "white";
    newDiv.style.background = "radial-gradient(circle, rgba(255,255,255,1.0) 1%, rgba(255,255,255,0.0))";
    newDiv.style.left = setLeftPosition();
    newDiv.style.top = setTopPosition();
    
      stars.appendChild(newDiv);
  }
}
function setLeftPosition(){
  let min = Math.ceil(0);
  let max = Math.floor(1400);
  let rand = Math.floor(Math.random() * (max - min)) + min;
  
  return rand + "px";
}
function setTopPosition(){
  let min = Math.ceil(0);
  let max = Math.floor(490);
  let rand = Math.floor(Math.random() * (max - min)) + min;
  
  return rand + "px";
}

#scene {
	position: relative;
  overflow: hidden;
  height: 1000px;
  width: 100%;
  background-color:rgb(0, 24, 63);
  background: linear-gradient(35deg,rgb(0, 24, 63) 10%, rgb(17, 0, 14));
}
#starContainer {
  color: white;
  z-index: -1;
  height: inherit;
  width: inherit;
}
  #ground { 
   position: absolute;
  height: 245px;
  width: 650px;
    border-left:20px solid transparent;
   margin-top: 800px;
 margin-left: 68%; 
  background-color: rgb(2, 2, 2);
  border-radius: 50px;
} 
#middle-ground {
  z-index: 2;
  position:absolute;
  border-bottom: 175px solid rgb(2, 2, 2);
  border-left: 150px solid transparent;
  border-top: 20px solid transparent;
  margin-top:792px;
  margin-left: 845px;
}
#slanted-border {
  position:absolute;
  width: 200px;
  border-bottom: 115px solid rgb(5, 5, 5);
  border-left: 150px solid transparent;
  border-top: 50px solid transparent;
  margin-top:845px;
  margin-left: 730px;
  
}

<!DOCTYPE html>
<html>
<head>
<!-- title & links to scripts & css---> 
	
<div id="scene" onload="starz()">
  <span id="starContainer">
    <!-- <p> I AM JESUS I AM JESUS</p> -->
  </span>
  <div id="slanted-border"></div>
  <div id="middle-ground"></div>
  <div id="lower-ground"></div>
  <div id="ground"></div>
</div>
</body>
</html>

所以这不起作用。记录"星星"（包含StarContainer的变量）返回null。我不明白怎么了。其他时候，我有完全样式的divs，我不得不逐个名称抓住一个div，并通过它们循环循环导致undefined，而样式的对象没有值。

但是，有时它有效！在以后的问题中，我强迫它，并通过ID抓住了每个Divs，并且代码奏效。在此方面，它可以在Codepen上使用（如果我将其设置为on Click，而不是on load），并且在我用来上传该代码snippit的提供的小提琴中起作用，但它不能用作Onload，Onfocus或OnClick的工作在实际浏览器中。

请建议

尝试在Starz函数中移动var stars = document.getElementById("starContainer");，因此在文档负载下初始化：

function starz() {
  var stars = document.getElementById("starContainer");
  for ( let i = 1; i <= 60; i++){
    var newDiv = document.createElement('div');
    newDiv.style.position = "absolute";
    newDiv.className = "star";
    newDiv.style.height = "15px";
    newDiv.style.width = "15px";
    newDiv.style.color = "white";
    newDiv.innerHTML = "star";
    newDiv.style.borderRadius = "15px";
    newDiv.style.backgroundColor = "white";
    newDiv.style.background = "radial-gradient(circle, rgba(255,255,255,1.0) 1%, rgba(255,255,255,0.0))";
    newDiv.style.left = setLeftPosition();
    newDiv.style.top = setTopPosition();
    
      stars.appendChild(newDiv);
  }
}
function setLeftPosition(){
  let min = Math.ceil(0);
  let max = Math.floor(1400);
  let rand = Math.floor(Math.random() * (max - min)) + min;
  
  return rand + "px";
}
function setTopPosition(){
  let min = Math.ceil(0);
  let max = Math.floor(490);
  let rand = Math.floor(Math.random() * (max - min)) + min;
  
  return rand + "px";
}

相关内容

最新更新

热门标签：