1

要素のtext colorとborder colorを変更したい。<TD>私はそれをグーグルで検索しましたが、適切な解決策が得られませんでした。私がそれを使用するとき、tdの3つの境界線border-color:blueの色を変更するだけ ですが、上の境界線はまだ変更されていません。なぜなのかわかりません。td

text colorまた、Javaスクリプトを使用して変更したいのですtdが、そのようなプロパティはありません。どうすればこれを行うことができますか？

ここにカレンダーコントロールを作成しようとしていますが、これが私のコードです...

 <script id="allTemplate" type="text/raj"> 
 <tr> 


          {{if "Su" == Sunday }}  
          <td>${Sunday}</td>
          {{else}}
            {{if date.getDate() == Sunday }}
             <td id="cell${Sunday}" style="border:1px solid blue;cursor: pointer" onclick="selectDate('${Sunday}','cell${Sunday}')">${Sunday}</td>
            {{else}}
                 {{if "" == Sunday }}
                  <td>${Sunday}</td>
                   {{else}}
            <td id="cell${Sunday}" style="cursor: pointer" onclick="selectDate('${Sunday}','cell${Sunday}')">${Sunday}</td>
                   {{/if}}
            {{/if}}
          {{/if}}
          {{if "Mo" == Monday }}  
          <td>${Monday}</td>
          {{else}}
            {{if date.getDate() == Monday }}
            <td id="cell${Monday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Monday}','cell${Monday}')"><font color="Red">${Monday}</font></td>
            {{else}}
                {{if "" == Monday }}
            <td>${Monday}</td>
               {{else}}
            <td id="cell${Monday}" style="cursor: pointer" onclick="selectDate('${Monday}','cell${Monday}')">${Monday}</td>
               {{/if}}
            {{/if}}
          {{/if}}
          {{if "Tu" == Tuesday }}  
          <td>${Tuesday}</td>
          {{else}}
            {{if date.getDate() == Tuesday }}
            <td id="cell${Tuesday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Tuesday}','cell${Tuesday}')"><font color="Red">${Tuesday}</font></td>
            {{else}}
                  {{if "" == Tuesday }}
            <td>${Tuesday}</td>
                   {{else}}
            <td id="cell${Tuesday}" style="cursor: pointer" onclick="selectDate('${Tuesday}','cell${Tuesday}')">${Tuesday}</td>
                   {{/if}}
            {{/if}}
          {{/if}}
          {{if "We" == Wednesday }}  
          <td>${Wednesday}</td>
          {{else}}
            {{if date.getDate() == Wednesday }}
            <td id="cell${Wednesday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Wednesday}','cell${Wednesday}')"><font color="Red">${Wednesday}</font></td>
            {{else}}
                 {{if "" == Wednesday }}
                 <td>${Wednesday}</td>
                 {{else}}
            <td id="cell${Wednesday}" style="cursor: pointer" onclick="selectDate('${Wednesday}','cell${Wednesday}')">${Wednesday}</td>
                 {{/if}}
            {{/if}}
          {{/if}}
          {{if "Th" == Thursday }}  
          <td>${Thursday}</td>
          {{else}}
            {{if date.getDate() == Thursday }}
            <td id="cell${Thursday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Thursday}','cell${Thursday}')"><font color="Red">${Thursday}</font></td>
            {{else}}
                 {{if "" == Thursday }}
                 <td>${Thursday}</td>
                 {{else}}
            <td id="cell${Thursday}" style="cursor: pointer" onclick="selectDate('${Thursday}','cell${Thursday}')">${Thursday}</td>
                 {{/if}}
            {{/if}}
          {{/if}}
          {{if "Fr" == Friday }}  
          <td>${Friday}</td>
          {{else}}
            {{if date.getDate() == Friday }}
            <td id="cell${Friday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Friday}','cell${Friday}')"><font color="Red">${Friday}</font></td>
            {{else}}
                {{if "" == Friday }}
                <td>${Friday}</td>
                {{else}}
            <td id="cell${Friday}" style="cursor: pointer" onclick="selectDate('${Friday}','cell${Friday}')">${Friday}</td>
                {{/if}}
            {{/if}}
          {{/if}}
          {{if "Sa" == Saturday }}  
          <td>${Saturday}</td>
          {{else}}
            {{if date.getDate() == Saturday }}
            <td id="cell${Saturday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Saturday}','cell${Saturday}')"><font color="Red">${Saturday}</font></td>
            {{else}}
                {{if "" == Saturday }}  
            <td>${Saturday}</td>
                {{else}}
            <td id="cell${Saturday}" style="cursor: pointer" onclick="selectDate('${Saturday}','cell${Saturday}')">${Saturday}</td>
                 {{/if}}
            {{/if}}
          {{/if}}


</tr> 

</script>

これは、td の境界線の色を変更したい j クエリ テンプレートです。条件が true の場合、td の境界線の色は変更されますが、上のエッジではなく 3 つのエッジのみが変更されます。

4

3 に答える 3

4

あなたが探しているのは

var td = document.getElementById('something')
td.style.color="red"
td.style.border="1px solid blue"

ここで実際の動作を確認できます。

于 2012-08-17T11:26:46.717 に答える
0

@Raj-基本的な情報についてはMozillaDeveloperサイトを見て、いくつか試してみたら質問してください。

ちなみに、これは@Arun P Johnyの回答と同様のアプローチですが、Jqueryで実装されています：http：//codepen.io/5arx/pen/djhJE

于 2012-08-17T11:27:45.173 に答える
0

純粋にCSSでそれを行いたい場合は、完全な境界線スタイルを設定する必要があることに注意してくださいtd-色のみを設定すると、他の線のスタイルの影響を受けない境界線のみが影響を受けます（私はこの背後にある完全な理由を理解することはかなり技術的で複雑です！）。

この例では、赤い境界線のセルが1 px solid red適用されていますが、ピンクtdの境界線は指定された色のみであるため、下の境界線（との一部table）trは影響を受けません。

于 2012-08-17T11:35:45.093 に答える