CSS通过id递增

CSS Increment through id

本文关键字：递增 id 通过 CSS      更新时间：2023-09-26

我有一组由javascript生成的文本框。其中一些文本框需要额外的CSS样式。我不能使用id属性，因为只有一些文本框需要这种样式。我也不能使用class属性，因为它在所有文本框中都是相同的。

我目前使用的CSS如下：

#txtSys8
{
position: relative;
left: 203px;
}
#txtSys9
{
position: relative;
left: 203px;
}
#txtSys10
{
position: relative;
left: 203px;
}

有没有一种方法可以让我在不单独设置样式的情况下循环这些id（从#txtSysy8到#txtSys19）？

这是生成html 的代码

rssTag ="<TABLE id='rssTable' border='"0'" width='"100%'"><TBODY>";
for(var i=8; i<arrGridData.length; i++){
var upToNCharacters = arrGridData[i][0].substring(0, 13);
if(upToNCharacters == "RSS_FEED_LINK"){
rssTag+="<TR><TD><font>" + arrGridData[i][1] + ":</TD><TD>  <input type='"text'" id='"txtSys"+i+"'" name='"txtSys"+i+"'" onChange='"pgEdited()'" tabindex='" " +(i+1) +"'" class='"fontDefault'"></TD><TD><input type='"checkbox'" id='"check" + arrGridData[i][0].substring(14, arrGridData[i][0].toString().length) + "'" name='"check'" onChange='"pgEdited()'" class='"chk'"/></TD></TR>";
        }else{
rssTag+="<TR><TD><font>" + arrGridData[i][1] + ":</TD><TD><input type='"text'" id='"txtSys"+i+"'" name='"txtSys"+i+"'" onChange='"pgEdited()'" tabindex='" " +(i+1) +"'" class='"fontDefault'"></TD></TR>";
        }
        createArrControls(i);
rssTag += "</TBODY></TABLE>";
document.getElementById('tableDiv2').innerHTML=rssTag;

我正在检查一个javascript数组，如果该数组包含一个带有"RSS_FEED_LINK"的字符串，它将在字符串"rssTag"后附加一个文本框和一个复选框。否则，只会添加一个文本框。

我需要将样式添加到这些生成的文本框

您可以使用子字符串匹配属性选择器

[attribute^=value]选择器匹配属性值以指定值开头的每个元素。

div[id^='txtSys'] {
   position: relative;
   left: 203px;
}

更改需要新样式的texbox

<input type='textbox' id="txtId" class="someClass"/> 
 to
<input type='textbox' id="txtId" class="someClass myClass">
 .myClass
{
 /*add your styles here*/
}

使用纯JavaScript 添加额外的类

document.getElementById("myDiv").className += " myClass";

谢谢大家。。。它现在运行良好

我的javascript：

rssTag+="<TR><TD><font>" + arrGridData[i][1] + ":</TD><TD><input type='"text'" id='"txtSys"+i+"'" name='"txtSys"+i+"'" onChange='"pgEdited()'" tabindex='" " +(i+1) +"'" class='"fontDefault textClass'"></TD></TR>";

我在文本框中添加了另一个类（class=''"fontDefault textClass''"）。

我的CSS:

input.textClass
{
position: relative;
left: 202px;
}
相关文章：