Question

我尝试根据验证创建自定义错误消息和样式（我知道插件，但是使用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: Cannot set property 'color' of undefined

Answer 1

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

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

或

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

但第一个更多是 jQueryish 。

Answer 2

$Label是一个jQuery对象，而不是标准节点元素，因此您可以执行$Label[0].style.color = '#8e8ef5';或$Label.css('color', '#8e8ef5');

Answer 3

尝试$Label.css({color:'#8e8ef5'});

Answer 4

您的问题是您正在尝试访问jQuery对象上的DOM属性style，这就是您获得Cannot set property 'color' of undefined的原因。

在您的代码中$Label是一个jQuery对象，并且没有style属性，因为.style是一个DOM对象属性，因此您不能将它与jQuery对象一起使用。

您需要使用 The working copy '<Project Name>' failed to commit files - Couldnt communicate with helper application 方法：

$Label.css('color', '#8e8ef5');

有关详细信息，请参阅 .css() 。

Answer 5

当您无法将样式正确绑定到元素时，会出现此错误。在实例<div *ngStyle="styleClass(variable)">{{variable.time}}</div>的AngularJS中，这将返回无法设置未定义属性颜色的情况。相反，您应该这样做<div {ngStyle}="styleClass(variable)>{{variable.time}}</div>

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

无法设置属性＆＃39; color＆＃39;未定义的

5 个答案: