某个类的QuerySelectorAll不包含样式属性？

Question

I'm currently missing something about how querySelectorAll is working in my code. I'm using it to loop through and set event listeners of all tds in a table in order to grab reference to whichever one is clicked so that I can modify that td only. However in implementing a side functionality, I have run into a problem that I don't understand. It appears that even though each td has a class, and the class is given a background-color style via CSS, the value is considered blank unless I manually set it (via my paintColor function). Console.log reveals that the value is blank until its expressly set. Why?

Thanks

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;
}

Click here

Answer 1

I believe what is happening here is that the Node object doesn't have styles explicitly set on it and that's why you are getting the empty string when accessing the obj.style.whatever. HTML Node objects and CSS are separate entities and the CSS is telling the browser (not the Node) to change its style. If you set your CSS inline on the element, it should show when accessing it the way you do.

See here: http://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style