单击按钮后无法读取刚刚在 JS 中创建的 DIV 的属性（“null”）答案

【问题标题】：Cannot read a property ("null") of a DIV just created in JS after button click单击按钮后无法读取刚刚在 JS 中创建的 DIV 的属性（“null”）
【发布时间】：2018-01-11 18:41:24
【问题描述】：

我正在尝试创建一个基本网页，允许用户在按下按钮时创建一个新的 DIV。我成功地完成了那部分。现在要在按下时找到单个 DIV（这样我以后可以应用其他功能，例如对其进行编辑），而不使用大量重复代码，我创建/设计了一个系统来比较悬停在上面的 DIV 的颜色并找到它的 ID。但是，分配给 DIV 的颜色显然仍然为空，尽管您可以看到 CSS 更改了它的颜色。有什么建议？对不起，如果我的代码显示得很糟糕；第一次在这里写问题。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="scripts/scripts.js"></script>
    <script src="scripts/jquery-3.2.1.min.js"></script>
</head>
<body>
    <form onsubmit="createNewContentTile(); return false;">
        <input type="submit" id="addTile" value="+">
        <input type="text" id="inputTextContent" placeholder="content" maxlength="256">
    </form>
</body>
</html>

JavaScript：

var tileDivIDCounter = 0;
var arrayOfTileIDs = ["tileDiv1"];
var selectTileDivIDCounter = 0;
var selectedTile = "";

function tileClicked() {
    while (document.getElementById(arrayOfTileIDs[selectTileDivIDCounter]).style.backgroundcolor === "#ff0000") {
        selectedTile = arrayOfTileIDs[selectTileDivIDCounter];
        alert(arrayOfTileIDs[selectTileDivIDCounter]);
    }
    selectTileDivIDCounter += 1;
}

function createNewContentTile() {
    if (document.getElementById("inputTextContent").value === "") {
        alert("Enter content");
    } else {
        tileDivIDCounter += 1;
        tileDivIDString = "tileDivID" + tileDivIDCounter;
        arrayOfTileIDs.push(tileDivIDString);
        var newDiv = document.createElement("div");
        newDiv.setAttribute("class", "tileDiv");
        newDiv.setAttribute("id", tileDivIDString);
        newDiv.setAttribute("onclick", "tileClicked()");
        var inputText = document.getElementById("inputTextContent").value;
        var newContent = document.createTextNode(inputText);
        document.getElementById("inputTextContent").value = "";
        newDiv.appendChild(newContent);
        var currentDiv = document.getElementById("div1");
        document.body.insertBefore(newDiv, currentDiv);      //change to bottom of wrapper
    }


}

CSS：

.tileDiv {
background-color: aqua;
}

.tileDiv:hover {
    background-color: #ff0000;
}

【问题讨论】：

您的元素 id 在 createNewContentTitle() 中称为 "tileDivID"，但您在 tileClicked() 中引用了 tileDiv1。
您是否使用悬停颜色来指示要编辑哪个<div>？为什么不使用onMouseOver 事件触发器？
这将在另一种情况下工作，但是每个 onMouseOver 事件触发器都需要一个函数，并且由于创建的 DIV 的数量没有限制，如果这有意义的话，它不会是动态的。谢谢你。

标签： javascript html null

【解决方案1】：

我认为您正在尝试做的事情有两个问题：

1) 样式和计算样式是两个不同的东西。简单地将 CSS 样式应用于元素不会更改样式属性。见https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

2) selectTileDivIDCounter 永远不会改变，因此将始终设置为 0，指向一个不存在的元素（这就是你得到 null 的原因）

编辑：

第 2 点并不完全正确，因为它确实在 onclick 函数中递增。那里可能有一些命名问题，我不确定。不过，我认为主要问题可能是第 1 点。

【讨论】：

我明白了，谢谢。我相信我尝试过的方法是不可能的，所以会尝试另一种方法。欢呼

【解决方案2】：

来自MDN Web Docs

HTMLElement.style 属性用于获取和设置元素的内联样式

因为你的元素的背景颜色是由 css 类给出的，所以 tileDiv 的内联样式保持为空，所以 tileDiv.style.backgroundColor 是 ""

要检索 HTMLElement 的所有当前计算的样式（CSS 属性），请使用

window.getComputedStyle(div)

要获取当前计算的背景颜色，请使用

window.getComputedStyle(div).backgroundColor

或

window.getComputedStyle(div).getPropertyValue('background-color')

div 是您选择的元素。

【讨论】：

OP 收到一条错误消息，指出无法在 null 元素上获取 style 属性。不是style 是undefined。
“但是，分配给 DIV 的颜色显然仍然为空”。我不认为 OP 在这里有错误。你是对的。我想我的回答刚刚解决了他的下一个问题，因为 style.backgroundColor 仍然不起作用。
感谢您的反馈，但由于我对此不熟悉，因此无法确定在何处实施。我会将这些代码 sn-ps 放在哪里？
你把它们放在tileClicked的while循环中。该 div 上的样式属性将始终为 ""，因为您在创建磁贴时没有设置内联样式。
参数 1 不是类型“元素”函数 tileClicked() { while (window.getComputedStyle(arrayOfTileIDs[selectTileDivIDCounter]).backgroundColor === "#ff0000") { selectedTile = arrayOfTileIDs[selectTileDivIDCounter];警报（arrayOfTileIDs[selectTileDivIDCounter]）； } selectTileDivIDCounter += 1; }