Question

无法设置未定义的属性“颜色”

2017-06-05

7917

javascript jquery

我尝试根据验证创建自定义错误消息和样式（我了解插件，但协调验证插件与 Materialize 所需的时间对于单个字段来说太多了）。

HTML：

<div class="input-field inline center-align">
  <input id="quantity" name="quantity" type="number" class="">
  <label for="qty" data-error="wrong" data-success="right" 
       class="active">Qty</label>
  <span id="qty-error">really?</span>
</div>

JS：

$('#quantity').change(function(){
  var $Qty = $(this).val();
  var $Label = $('#qty-error');
  if ($Qty > 0 && $Qty <= $AvailTix){
      $Label.html('seems reasonable');
      $Label.style.color = '#8e8ef5';
      $(this).addClass('valid');
  } else if ($Qty < 1){
      $Label.html('really?');
      $Label.style.color ='#f96d63';
      $(this).addClass('invalid');
  }
});

让我感到困惑的是 $Label.html 部分正在运行。它更改了文本。但我在控制台中收到 $Label.style.color 行的此错误：

Uncaught TypeError：无法设置未定义的属性“color”

Answer 1

.style 是元素的属性。使用 jQuery，您可以在数组中使用该元素。更像 [elem]。因此，使用：

$Label.css('color', '#f96d63');

或

$Label.get(0).style.color = '#8e8ef5';

但第一个更像 jQueryish 。

Answer 2

您的问题是您正在尝试在jQuery对象上访问dom属性 style ，这就是为什么您获得 无法设置不确定的 。

在您的代码 中属性，因此您不能与jQuery对象一起使用。

您需要使用 .css（） 方法：

841604346

有关更多详细信息，您可以阅读 jquery对象和dom元素 。

Answer 3

如果未能将样式适当地绑定到元素，则会收到此错误。例如，在 AngularJS 中 <div *ngStyle="styleClass(variable)">{{variable.time}}</div> ，这将返回无法设置未定义的属性颜色。相反，您应该这样做 <div {ngStyle}="styleClass(variable)>{{variable.time}}</div>

有关 AngularJS 中绑定的详细信息，请参阅 https://alligator.io/angular/style-binding-ngstyle-angular/