用getElementById设计动态ID的输入字段

Question

我有一些输入字段，它的id号动态变化。

例如，下面的代码显示了一个具有"id="field14“的输入字段。id中的单词(字段)没有变化，但(数字)是动态变化的。因此，它可能是field14，field13，或field20等，而且没有数字的限制。

<input type="text" name="field[14]" id="field14" value="" size="30" style="height: 24px;">

我使用以下代码对输入字段进行样式设置：

document.getElementById("field14").style.height = "24px";

注意，应用程序的PHP代码是编码的&我是用智能模板编辑的。

模板中的输入代码是这样的：{$field.input}，所以当我检查活动页面上的元素时，它用id的动态编号显示输入的上面的代码。

我想要一种方式，允许我对以单词(字段)启动并以动态(数字)结束的页面的任何输入字段进行样式设置。有什么建议吗？

Answer 1

您可以使用属性选择器：

input[id^=field] {
    /* Styles */
}

它将匹配其input属性以"field“开头的所有id元素。在“字段”和数字之间使用一些分隔符，可以更好地防止像“field to”这样的匹配。

​

input[id^=field] {
  background: red;
}

<input id="field1" />
<input id="field2" />
<input id="field3" />
<input id="field15" />
<input id="field99" />

​

Answer 2

对于纯CSS方法，我将检查name，因此您应该只查找其属性以field[开头并以结束括号]结尾的输入元素。

例如：

input[name^="field["][name$="]"] {
   ...
}

从您发布的代码中，您可以合理地假设括号中包含数字索引的所有元素的名称都是与该动态索引相同的元素，作为[]的一部分。

否则，您可能会编写一组更复杂的选择器，以寻找以id开头的field，以数字[0..9]结尾。

例如：

input[id^="field"][id$="0"],
input[id^="field"][id$="1"],
input[id^="field"][id$="2"],
input[id^="field"][id$="3"],
input[id^="field"][id$="4"],
input[id^="field"][id$="5"],
input[id^="field"][id$="6"],
input[id^="field"][id$="7"],
input[id^="field"][id$="8"],
input[id^="field"][id$="9"] {
   ...
}

甚至把这两种方法结合起来

input[name^="field["][name$="]"][id$="0"],
input[name^="field["][name$="]"][id$="1"],
...
input[name^="field["][name$="]"][id$="9"] {
   ...
}

Answer 3

我强烈建议使用class属性：

<input type="text" class="fields" name="field[14]" id="field14" value="" size="30" style="height: 24px;">

CSS

.fields {
  /*style*/
}