类的QuerySelectorall不包括样式属性

Question

我目前缺少有关QuerySelectorall在我的代码中工作的方式。我正在使用它来循环并设置表中所有TD的事件侦听器，以获取单击哪个的引用，以便我只能修改该TD。但是，在实施辅助功能时，我遇到了一个我不了解的问题。看来，即使每个TD都有一个类，并且通过CSS给予该类的背景色样式，除非我手动将其设置(通过我的PaintColor函数(，否则该值被视为空白。Console.Log揭示该值是空白的，直到其明确设置为止。为什么？

谢谢

html

<table class="table">
    <!-- Row 1 -->
    <tr class="row">
      <td class="cell"></td>
      <td class="cell"></td>
<div class="menus">
  <div class="menu-left">
    <input type="checkbox" id="eye-check" unchecked/>
    <span>Eyedropper</span>
    <table class="eye-table">
      <td class="eye-cell">
        <span class="tooltip">Hexidecimal value of selected eyedropper
 color.</span>
      </td>
    </table>
    <div class="menu-left-text">
      <p class="eye-text">rgb(255,255,255)</p>
    </div>
  </div>

CSS

.cell {
  border: 1px solid lightgrey;
  /* box-shadow: 1.5px 1.5px 1.5px lightgrey; */
  background-color: #ffffff;
  width: 16px;
  height: 16px;
  cursor: crosshair;
  z-index: 4;
 }

JS

// Gloabal Variables
let cells = document.querySelectorAll(".cell");
let activeColor = "rgb(255,255,255)";
let table = document.querySelector("table.table");
let activeCell = document.querySelector(".cell");
let dropper;
let eyeCell = document.querySelector(".eye-cell");
let eyeText = document.querySelector(".eye-text");
// Listen for EyeDropper
document.querySelector("#eye-check").addEventListener("click", evt =>{
dropper = document.querySelector("#eye-check");
if (dropper.checked) {
// Set Dropper Indicator on Table Border
table.style.border = "5px dashed black";
  } else {
// Set Paint Indicator on Table Border
table.style.border = "5px solid silver";
}
});
// Listen for Clicks
for (let i = 0; i < cells.length; i++) {
cells[i].addEventListener("click", evt => {
activeCell = cells[i];
// Check for EyeDropper Toggle
checkDropper();
});
}
// Check for Eye Dropper Checked
function checkDropper() {
dropper = document.querySelector("#eye-check");
if (dropper.checked) {
activateDropper();
} else {
activatePaint();
}
}
// Dropper is Active, Activate Dropper
function activateDropper() {
// Set EyeDropper Color
eyeCell.style.backgroundColor = activeCell.style.backgroundColor;
// Set Text Value
eyeText.innerHTML = activeCell.style.backgroundColor.replace(/s
/g,"");}
// Dropper is Inactive, Activate Painting
function activatePaint() {
// Get Active Color
getActiveColor();
// Paint Color into Cell
paintColor();
}
// Get Brush Color
function getActiveColor() {
activeColor = document.querySelector("#brush-color").value;
}
// Paint Color into active cell
function paintColor() {
activeCell.style.backgroundColor = activeColor;
}

单击此处

Answer 1

我相信这里发生的事情是节点对象没有明确设置的样式，这就是为什么您在访问obj..style.s. style.thyther时获得空字符串的原因。HTML节点对象和CSS是独立的实体，CSS告诉浏览器(不是节点(更改其样式。如果将CSS内联设置在元素上，则应在访问它的方式时显示。

请参阅此处：http：//developer.mozilla.org/en-us/docs/web/api/htmlement/style