1

JavaScriptによって生成されたテキストボックスのセットがあります。これらのテキスト ボックスの一部には、追加の CSS スタイルが必要です。一部のテキストボックスのみがこのスタイリングを必要とするため、id プロパティを使用できません。すべてのテキストボックスで同じであるため、クラスプロパティも使用できません。

私は現在、次のような 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」にテキストボックスとチェックボックスが追加されます。それ以外の場合は、テキスト ボックスのみが追加されます。

これらの生成されたテキストボックスにスタイルを追加する必要があります

4

3 に答える 3

5

サブストリング一致属性セレクターを使用できます

セレクターは[attribute^=value]、属性値が指定された値で始まるすべての要素に一致します。

div[id^='txtSys'] {
   position: relative;
   left: 203px;
}
于 2013-07-30T07:30:15.480 に答える
2

新しいスタイルが必要なテキストボックスを変更します

<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";
于 2013-07-30T07:32:23.600 に答える