Question

window.onload = function() {

    var colors = [

        "rgb(255,0,0)",
        "rgb(0,255,0)",
        "rgb(0,0,255)",
        "rgb(182,12,235)",
        "rgb(166,212,166)",
        "rgb(242,123,72)"
    ]

    var pickedColor = colors[3];

    var colorDisplay = document.getElementById("colorDisplay");

    colorDisplay.textContent = pickedColor;

    var squares = document.querySelectorAll(".square");

    for (var i = 0; i < squares.length; i++) {

        //coloring each square through colors array

        squares[i].style.background = colors[i];

        //listening for a click to compare if true

        squares[i].addEventListener("click", function() {

            var clickedColor = this.style.background;

            var op = "rgb(182,12,235)";

            if (pickedColor == clickedColor) {
                alert("true");
            }
        });
    }
};

我不知道为什么我的if语句不能正常工作当我使用“===”比较运算符比较pickedColor和ClickedColor我已经尝试过警告，它们都是相同的值但是当我比较这个if语句总是返回假：

if (pickedColor == clickedColor) {
    alert("true");    
}

我不知道为什么它不起作用。

Answer 1

如果您记录从this.style.background返回的值，您会看到在逗号后面有空格"rgb(0, 0, 255)"，但这不是您在数组中使用字符串的方式。你有："rgb(0,0,255)"。调整这些字符串以匹配JavaScript从JavaScript返回的方式，解决了大多数浏览器中的问题，但不是全部。要确保空间不会成为问题，您可以通过从数组中手动删除它们然后从返回的JavaScript值中动态删除它们来确保您使用的值都没有：

window.onload = function(){

  var colors = [
    "rgb(255,0,0)",
    "rgb(0,255,0)",
    "rgb(0,0,255)",
    "rgb(182,12,235)",
    "rgb(166,212,166)",
    "rgb(242,123,72)"
  ];

  var pickedColor = colors[2];
  var colorDisplay = document.getElementById("colorDisplay");
  colorDisplay.textContent = pickedColor;
  var squares = document.querySelectorAll(".square");
  
  for(var i = 0;i<squares.length;i++){
    //coloring each square through colors array
    squares[i].style.background = colors[i]; 
    //listening for a click to compare if true
    squares[i].addEventListener("click",function(){
    
        // Ensure that the stored color has no spaces in it by using a regular expression
        // that finds all spaces and replaces them with nothing, essentially removing all spaces.
        var clickedColor = this.style.background.replace(/\s+/g, "");
      
        console.log(clickedColor);  // Logging what you are testing finds the issue.
        
        var op = "rgb(182,12,235)";
        if(pickedColor == clickedColor){
            alert("true");
        }
   });
  }
};

.square {width:100px; height:100px; border:2px solid black;}

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div id="colorDisplay"></div>

现在，使用DOM元素的style属性可能会很棘手，因为如果元素具有硬编码的style属性，并且HTML中包含值，则它只返回一个值如果某些先前代码已在元素上动态创建内联样式。如果样式通过CSS类应用于元素，则style属性不会返回该值。

更好的技术是获取CSS渲染引擎为元素计算的最终实际颜色值，无论该样式在何处或如何应用。这可确保您始终获得CSS属性的真实值。这是通过 window.getComputedStyle() 方法完成的。

最后，重要的是要知道background属性是一个简写属性，允许您同时设置许多不同的背景相关属性，因此当您检索它的值时，您很可能获得的不仅仅是背景颜色。要针对单个属性进行测试，请专门测试该属性（backgroundColor）。

window.onload = function(){

  var colors = [
    "rgb(255,0,0)",
    "rgb(0,255,0)",
    "rgb(0,0,255)",
    "rgb(182,12,235)",
    "rgb(166,212,166)",
    "rgb(242,123,72)"
  ];

  var pickedColor = colors[2];
  var colorDisplay = document.getElementById("colorDisplay");
  colorDisplay.textContent = pickedColor;
  var squares = document.querySelectorAll(".square");
  
  for(var i = 0;i<squares.length;i++){
    //coloring each square through colors array
    squares[i].style.background = colors[i]; 
    //listening for a click to compare if true
    squares[i].addEventListener("click",function(){
    
        // Use window.getComputedStyle() for better results

        // Ensure that the stored color has no spaces in it by using a regular expression
        // that finds all spaces and replaces them with nothing, essentially removing all spaces.
        var clickedColor = window.getComputedStyle(this).backgroundColor.replace(/\s+/g, "");
      
        console.log(clickedColor);  // Logging what you are testing finds the issue.
        
        var op = "rgb(182,12,235)";
        if(pickedColor == clickedColor){
            alert("true");
        }
   });
  }
};

.square {width:100px; height:100px; border:2px solid black;}

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div id="colorDisplay"></div>

Answer 2

您应该在元素上创建一个数据集并引用它。

for (var i = 0; i < squares.length; i++) {

    //coloring each square through colors array

    squares[i].style.background = colors[i];
    squares[i].dataset.background = colors[i];

    //listening for a click to compare if true

    squares[i].addEventListener("click", function() {

        var clickedColor = this.dataset.background;
        var op = "rgb(182,12,235)";
        if (pickedColor == clickedColor) {
            alert("true");
        }
    });
}

Answer 3

这实际上不是一种可靠的方法，因为您期望一个非常准确的浏览器输出，空格恰好在正确的位置。但是有些浏览器会为您rgb(182,12,235)和其他人rgb(182, 12, 235)提供其他浏览器rgb( 182 , 12 , 235 )，甚至为什么不为rgba(182,12,235,1)

您应该将数据存储在属性中并从该属性中读取：

squares[i].setAttribute("data-color") = "rgb(166,212,166)"

和

squares[i].getAttribute("data-color") // This will always be "rgb(166,212,166)"

if语句总是返回false

3 个答案: