Question

在过去的两个小时里，我一直在尝试生成具有某些属性的div。但是，每次尝试都没有任何反应。请告诉我我做错了什么。

function roundDivGenerator()
{

var roundDiv = document.createElement("div");

  roundDiv.id = "roundDiv" + gauballTracker;
  roundDiv.class = "roundDivClass";
  roundDiv.innerHtml = divTracker;
  document.getElementByTagName("body")[0].appendChild(roundDiv);

  var roundDivCss = document.getElementByClassName('roundDivClass').style;

    roundDivCss.height = "44px";
    roundDivCss.width = "44px";
    roundDivCss.backgroundColor = "#8ed066";
    roundDivCss.border = "#b0f2e6 3px solid";
    roundDivCss.borderRadius = "22px";

    roundDivTracker++;
}
round_Div_Generator();

Answer 1

您的JS文件中有多个错误：

当您将其命名为round_Div_Generator

roundDivGenerator

您使用roundDiv.class代替roundDiv.className
您忘记了s

getElementsByTagName

您可以直接访问document.body。
您从未定义过roundDivTracker和gauballTracker
您使用roundDiv.innerHtml代替roundDiv.innerHTML
由于您已有权访问var roundDivCss = document.getElementByClassName('roundDivClass').style;元素，因此无需使用roundDiv。只需使用roundDiv.style。

下次，请务必检查浏览器控制台以查看JS中的错误。

const gauballTracker = 'foo';
let roundDivTracker = 0;

function roundDivGenerator() {
  let roundDiv = document.createElement("div");
  roundDiv.id = "roundDiv" + gauballTracker;
  roundDiv.className = "roundDivClass";
  roundDiv.innerHTML = roundDivTracker;
  document.body.appendChild(roundDiv);

  const roundDivCss = roundDiv.style;
  roundDivCss.height = "44px";
  roundDivCss.width = "44px";
  roundDivCss.backgroundColor = "#8ed066";
  roundDivCss.border = "#b0f2e6 3px solid";
  roundDivCss.borderRadius = "22px";
  roundDivCss.textAlign = 'center';

  roundDivTracker++;
}

roundDivGenerator();
roundDivGenerator();

Answer 2

你有一堆拼写错误。在输入之前，您需要查找要使用/设置的事物的确切名称。如果您不确定，只需复制并粘贴MDN中的属性和方法的名称。例如，不是innerHtml，而是innerHTML：https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

看看我改变了什么以使示例正常工作，但请稍后阅读浏览器控制台所说的内容。当您的脚本出现错误时，它会告诉您。（键盘上的F12）。

＆＃13;

var roundDivTracker = 0;
function roundDivGenerator()
{

var roundDiv = document.createElement("div");

  roundDiv.id = "roundDiv" + roundDivTracker;
  roundDiv.class = "roundDivClass";
  roundDiv.innerHTML = roundDivTracker;
  document.body.appendChild(roundDiv);

  // I had to change this for it to work in the code snippet on this site
  //var roundDivCss = document.getElementsByClassName('roundDivClass').style;
  var roundDivCss = roundDiv.style;

    roundDivCss.height = "44px";
    roundDivCss.width = "44px";
    roundDivCss.backgroundColor = "#8ed066";
    roundDivCss.border = "#b0f2e6 3px solid";
    roundDivCss.borderRadius = "22px";

    ++roundDivTracker;
}
roundDivGenerator();

＆＃13;

Answer 3

您的代码存在许多问题：

roundDiv.class = "roundDivClass";应为：roundDiv.className = "roundDivClass";
roundDiv.innerHtml = divTracker;应为：roundDiv.innerHTML = divTracker;
document.getElementByTagName("body")[0]是浪费的，因为只有一个body。它应该是：document.querySelector("body")
有几个问题：

var roundDivCss = document.getElementByClassName（'roundDivClass'）。style;

一个。 getElementsByClassName()返回一个“实时”节点列表，该列表会在您每次访问该节点列表时对DOM进行研究。它在性能方面可能非常浪费，因此，如果您不需要“实时”行为，请改用它：

var roundDivCss = document.querySelectorAll（'roundDivClass'）

湾接下来，由于getElementsByClassName()和querySelectorAll()都返回节点列表，因此您无法访问该列表的style。您必须从列表中选择一个项目，然后才能访问其style。

℃。如果元素没有附加内联样式（在HTML中静态或通过JavaScript动态），则访问DOM元素的style将返回空字符串。如果通过CSS类附加了样式，style将无法获得它。使用window.getComputedStyle(element).property;始终获取属性，无论其应用方式如何。

d。首先，这条线并不是必需的。
此代码：

roundDivCss.height = "44px"; roundDivCss.width = "44px"; roundDivCss.backgroundColor = "#8ed066"; roundDivCss.border = "#b0f2e6 3px solid"; roundDivCss.borderRadius = "22px";

真的应该变成一个CSS类，因为所有的值都是静态的，然后，只需一行代码就可以应用该类。

您运行函数的调用使用的名称与函数本身不同。
您对计数器的引用不一样。

所以，这是重写的代码：

var roundDivTracker = 0;

function roundDivGenerator(){

  var roundDiv = document.createElement("div");

  roundDiv.id = "roundDiv" + roundDivTracker;
  roundDiv.innerHTML = roundDivTracker;
  
  // Just one line to attach the class
  roundDiv.classList.add("divClass");

  // Only add the new element once its been completely set up
  document.querySelector("body").appendChild(roundDiv);

  roundDivTracker++;
}

roundDivGenerator();

.divClass {
  height : 44px;
  width : 44px;
  background-color : #8ed066;
  border : #b0f2e6 3px solid;
  border-radius : 22px;
  text-align:center;
}

javascript没有创建div

3 个答案: