使用 getElementById 对动态 ID 的输入字段进行样式设置答案

【问题标题】：Styling input field of dynamic ID using getElementById使用 getElementById 对动态 ID 的输入字段进行样式设置
【发布时间】：2015-03-30 14:22:32
【问题描述】：

我有一些输入字段，其 id 的数字会动态变化。

例如，下面的代码显示了一个包含“id="field14”的输入字段。 id中的单词（field）没有变化，但是（number）是动态变化的。所以可能是field14、field13、field20等，数量没有限制。

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

我正在使用以下代码来设置输入字段的样式：

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

请注意，应用程序的 PHP 代码已编码，我正在 smarty 模板中进行编辑。

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

我想要一种方法，允许我设置页面的任何输入字段的样式一个动态的（数字）。请问有什么建议吗？

【问题讨论】：

你愿意使用 jQuery 吗？
你不能用 smarty 为这个特定的输入添加一些类名吗？
为什么不为所有输入添加一个类？
@JerryB 您在建议的解决方案中尝试过吗？？

标签： javascript jquery html css

【解决方案1】：

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

例如

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

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

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

例如

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"] {
   ...
}

【讨论】：

【解决方案2】：

您可以使用属性选择器：

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

它将匹配id 属性以“字段”开头的所有input 元素。在“field”和数字之间使用一些分隔符可能会更好地防止匹配“fieldone”等内容。

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

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

【讨论】：

如果发生这种情况，我们会在天堂挥舞拳头：D

【解决方案3】：

我强烈建议使用类属性：

HTML

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

CSS

.fields {
  /*style*/
}

【讨论】：

【解决方案4】：

我想要一种方法来设置页面的任何输入字段的样式以单词（字段）开头，以动态（数字）结尾。任何请给点建议？

这是一个非常具体的问题，希望我们重点关注 id 以“field”开头并以动态数字结尾的事实。恕我直言，此解决方案完全按照仅使用 CSS 的要求回答了您的问题，而且它不需要您更改 HTML 或添加类属性（尽管这样会更好）。

此 CSS 代码将查找任何 ID 以“field”开头并以数字结尾的 <input> 标记。它还将排除那些以“字段”开头但不以数字结尾的人。

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']
{
    // styling code
}

演示代码：http://jsfiddle.net/Drakes/7wpnL/671/

【讨论】：

【解决方案5】：

如果您需要 JS 方法：

http://codepen.io/knitevision1/pen/LEaXxW

var num = 2;
document.getElementById("input" + num).style.backgroundColor = "blue";

如果我猜对了，你需要让你所有的新 input 看起来有点独特或其他什么。

您可以考虑获取当前呈现的inputs 的数量，然后获取最后一个，然后根据您想要的样式附加您的样式。

【讨论】：

【解决方案6】：

使用 jquery：

    var inputs = [];
    function getFields(){
        $('input').each(function() {
            if($(this).attr('id').substring(0,5)=='field'){
                inputs.push($(this));
            }
        });
    }

您可以在“each”循环中修改每个输入，也可以使用“inputs”变量。

【讨论】：

【解决方案7】：

演示：http://jsbin.com/kubaku/1/edit?html,js,output

JS

var inputs = document.getElementsByTagName('input');
var ID = 'field';
var i;

for(i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  var regex = new RegExp("^" + ID);

  if(regex.test(input.id)) {
    input.style.border = '1px solid #c00';
  }

}

【讨论】：