使用JavaScript覆盖CSS参数值

Question

我希望在出现错误时将输入文本框的颜色更改为红色。我所获得的代码有一个CSS样式表，如果我想使用该样式表，它只会将所有文本框的颜色更改为红色。是否有一种方法可以将文本框边框颜色发送到红色（在此我不关心错误的外观，只想知道设置任何单个文本框颜色所需的属性类型）。

以下是文本输入的代码：

 <input name="count" 
 type="number" 
 walked="true" 
 autocomplete="off" 
 class="htmlplusinput numberinput novalue" 
 style="width: 24px; " 
 id="htmlplusinputnumberinput19" 
 hasobj="true" 
 novaluedisplay="number">

我希望您能够不使用id访问此文本框，因为id是动态更改的。(我的意思是说，id htmlplusinputnumberinput19将在其他时间变为htmlplusinputnumberinput789)所以更好的解决方案是如果我可以使用其他参数。

这是应用于页面上所有输入文本框的CSS样式表

 input[type="text"], .htmlplusinput {
  border: 1px solid gray;
  }

- Judy

---

如果您澄清您的问题，可能会得到更好的回复：什么是样式表？其他非标准（例如walked）是用来做什么的？是否有任何方法可以通过查看属性等方式知道输入是否有误？ - dtech

谢谢回复...我不关心查看错误...我只想改变textinput边框的颜色...我已经添加了上面的CSS代码.. - Judy

然后你只需要将“灰色”改为红色，或者在JavaScript中：document.getElementsByTagName.each(function(input){input.style.borderColor = 'red'});（ECMAScript5但在旧版JavaScript中也很容易实现） - dtech

Answer 1

为了帮助你选择除id以外的输入元素，你需要提供有关页面标记的更多信息。可能会使用类似以下内容的东西：

$('#example-form input[name=count]')

如果您使用jQuery，设置CSS属性值很容易：

$('input[name=count]').css('border-color', 'red');

此外，您可以向元素添加一个错误类：

$('input[name=count]').addClass('error');

- Alp

---

谢谢...请问你能用JavaScript给出答案吗？代码也是JavaScript的，我不会jQuery :( - Judy

Judy，jQuery 是一个使 DOM 操作更加容易的 JavaScript 库。这一切都是 JavaScript。 - Ian Henry

Judy，你能否将jQuery库包含到页面中呢？这样会带来很多好处。如果不行，请告诉我。 - Alp

谢谢大家...不，我不能将库添加到页面中 :( - Judy

不，它并不会：重要的是要注意，这种方法不能替代一个类。请参见此处：http://api.jquery.com/addClass/。 - Alp

Answer 2

@Judy，我认为最好的方法是您的验证代码指出有问题的元素的ID。这样，您可以使用类似于以下jQuery的代码：$('#myElementId').css('border-color', 'red');

- Lucas Vasconcelos

---

谢谢...如果您能用JavaScript回答的话，我会非常感激..抱歉给您带来麻烦..（从上面的代码看（根据我对jQuery的了解），我需要访问具有id的元素..但是id是动态变化的..） - Judy

@Judy，您可以澄清一下您的问题，告诉我们您如何“知道”某个特定输入是“无效的”或“错误的”。根据您的验证代码，我们可以尝试为您提供更好的解决方案。 - Lucas Vasconcelos

Answer 3

我会给错误的输入添加一个类。

CSS：

input.error { color: red; };

Javascript（在验证点上）：

currentValidatingInput.className += " error";

- dtech