我正在尝试创建一个基本网页，允许用户在按下按钮时创建新的 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;
}
最佳答案
我认为您尝试做的事情存在两个问题:
1) 样式和计算样式是两个不同的东西。简单地将 CSS 样式应用于元素不会更改样式属性。请参阅https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
2) selectTileDivIDCounter 永远不会改变，因此将始终设置为 0，指向不存在的元素(这就是为什么你得到 null)
编辑:
第 2 点并不完全正确，因为它确实在 onclick 函数中递增。我不确定那里可能存在一些命名问题。不过，我认为主要问题可能是第一点。
关于javascript - 单击按钮后无法读取刚刚在 JS 中创建的 DIV 的属性 ("null")，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45496407/