Question

我正在尝试创建一个基本网页，允许用户在按下按钮时创建新的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;
}

Answer 1

我认为你要做的事情有两个问题：

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

2）selectTileDivIDCounter永远不会被改变所以总是被设置为0，指向一个不存在的元素（这就是你得到null的原因）

编辑：

第2点不完全正确，因为它在onclick函数中会增加。可能会有一些命名问题，我不确定。我认为主要问题可能是＃1点。

Answer 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是您选择的元素。

按钮点击

2 个答案: