为什么这个带有 2 个条件的 javascript 代码不起作用？答案

【问题标题】：Why this javascript code with 2 conditions not works?为什么这个带有 2 个条件的 javascript 代码不起作用？
【发布时间】：2015-02-22 15:53:23
【问题描述】：

function deletevalueuser(){
  if(document.getElementById('user').value=='Usuario'){
    if(document.getElementById('user').style.color=='#C0C0C0'){
      document.getElementById('user').value='';
      document.getElementById('user').style.color='black';
    }
  }
}

这就是只有在用户没有写任何东西的情况下才应该删除输入内容的 javascript 代码

【问题讨论】：

是用户、div还是输入字段？
它是一个带有用户 ID 的输入字段
提供显示问题的示例 HTML。
请向我们展示你的 html
因为浏览器会在内部将其转换为他们最喜欢的格式，然后在您通过element.style“查询”该值时返回该格式。然而，一旦你“正确”地做到这一点并设置类而不是直接操作样式，整个问题就会消失。

标签： javascript html

【解决方案1】：

我找不到任何文档来支持这一点，但似乎 IE、Chrome 和 Firefox 都将 style.color 属性作为 RGB 值返回，所以我建议与之进行比较：

function deletevalueuser(){
  if(document.getElementById('user').value === 'Usuario'){
    if(document.getElementById('user').style.color === 'rgb(192, 192, 192)'){
      document.getElementById('user').value = '';
      document.getElementById('user').style.color = 'black';
    }
  }
}

注意值之间的空格。这三个浏览器似乎在空格的使用上也是一致的。

另一方面，鉴于这是检查元素是否处于特定状态的一种相当不稳定的方法（例如，不考虑计算样式），我建议使用其他一些标准来执行您的检查（例如是否存在某个类等）。

【讨论】：

如果检查为===也做第一个

【解决方案2】：

它不起作用的原因是因为您使用的是十六进制值 #C0C0C0 并且代码返回rgb值：

这是一个工作演示：

function deletevalueuser(){
  console.log(document.getElementById('user').style.color);
  if(document.getElementById('user').value == 'Usuario'){
    if(document.getElementById('user').style.color == 'rgb(192, 192, 192)'){
      document.getElementById('user').value='';
      document.getElementById('user').style.color='black';
    }
  }
}

&lt;input onfocus="deletevalueuser()" type="text" value="Usuario" style="color:#C0C0C0" id="user"&gt;

【讨论】：

哈哈，我快了几秒钟。但这仍然是答案，所以加一！
@KevinAntolinezMiranda 你用的是哪个浏览器？
这是不是答案，比较颜色是一个可怕的想法，因为一些浏览器会返回十六进制，其他 RGB，而最新的浏览器会返回 RGBA，你永远不知道
好吧，他的问题不是关于如何在浏览器中比较颜色……而是关于条件。
如果你问我我会说你做错了整个事情。当 placeholder="type your username" 属性非常适合时，为什么还要使用 javascrip？

【解决方案3】：

我认为你不应该比较颜色代码的十六进制值，所以试试 rgb。

注意：#c0c0c0 的 rgb 为 192,192,192

function deletevalueuser(){
 var compare = "rgb(192,192,192);"
  if(document.getElementById('user').value==='Usuario'){
    if(document.getElementById('user').style.color===compare){
      document.getElementById('user').value='';
      document.getElementById('user').style.color='black';
    }
  }
}

我还在某处读到浏览器以小写形式读取十六进制代码，因此您可能也想尝试一下：

function deletevalueuser(){
 var compare = "rgb(192,192,192);"
  if(document.getElementById('user').value==='Usuario'){
    if(document.getElementById('user').style.color==='#c0c0c0'){
      document.getElementById('user').value='';
      document.getElementById('user').style.color='black';
    }
  }
}

【讨论】：

@KevinAntolinezMiranda k 试试并告诉我
我不会打赌每个浏览器都返回相同的“格式”。如果有的话，您应该通过读取具有该颜色集的元素的样式来获取初始比较值。（但正如前面评论中所说，正确的方法是通过操作元素 classes，而不是元素样式。）
@KevinAntolinezMiranda 编辑了我的答案，尝试选项 2
但通常最好检查类而不是颜色

【解决方案4】：

我可以告诉你你可能想要做什么，这里有一个更简单的解决方案来实现同样的事情：

&lt;input id="text" value="" placeholder="Usuario" /&gt;

placeholder 告诉浏览器几乎完全按照您的 JavaScript 代码执行的操作：当输入字段为空时显示一些灰色的占位符文本 ("Usuario")。

【讨论】：

是的，它工作得很好，谢谢大家我学到了新的想法

【解决方案5】：

工作jsfiddle demo

这里有很多可能的问题。

如果样式是在 css 中指定。你需要使用getComputedStyle()

如果您收到一种颜色，它可能是 rgb 格式，因此您必须将其转换为十六进制

function deletevalueuser(){
  el=document.getElementById('user');

  if(el.value=='Usuario'){
    cel=getComputedStyle(document.getElementById('user'), null);
    if(rgb2hex(cel.color).toUpperCase()==='#C0C0C0'){
      el.value='test';
      el.style.color='black';
    }
  }
}
deletevalueuser();

这是将rgb转换为hex的函数

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

【讨论】：