使用getElementById设置动态ID的输入字段的样式

Styling input field of dynamic ID using getElementById

本文关键字：输入 样式 字段 ID getElementById 设置 动态 使用      更新时间：2023-09-26

我有一些输入字段，其id的编号会动态更改。

例如，下面的代码显示了一个具有"id="field14"的输入字段。id中的单词（字段）不会更改，但（<数字>

<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的动态编号。

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

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

您可以使用属性选择器：

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

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

input[id^=field] {
  background: red;
}
<input id="field1" />
<input id="field2" />
<input id="field3" />
<input id="field15" />
<input id="field99" />

我强烈建议使用类属性：

HTML

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

CSS

.fields {
  /*style*/
}

我想要一种允许我对页面的任何输入字段进行样式设置的方式以单词（字段）开头，以动态（数字）结尾。任何请提出建议？

这是一个非常特定的问题，希望我们强调id以"field"开头，以动态数字结尾这一事实。IMHO这个解决方案只使用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/

如果需要JS方法：

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

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

如果我说得对的话，你需要所有新的input看起来有点独特。

你可以考虑获得一些当前呈现的inputs，然后获得最后一个，然后根据你想要的外观附加你的风格。

使用jquery：

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

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

演示：http://jsbin.com/kubaku/1/edit?html，js，输出

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';
  }
}
相关文章：