I want to change text color and border color of <TD> element. I googled for it but not getting proper solution. when i use border-color:blue it just change 3 borders color of td but top border of td still not change i don't know why is it.

and also i want to change text color of td using java script but there is no such kind of property. Please suggest me how can i do this?

i am trying to create calender control here is my code ...

 <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>

this is the j query template i want to change border color of td, when condition is true it change the border color of td but only 3 edges not top one.

I want to change text color and border color of <TD> element. I googled for it but not getting proper solution. when i use border-color:blue it just change 3 borders color of td but top border of td still not change i don't know why is it.

and also i want to change text color of td using java script but there is no such kind of property. Please suggest me how can i do this?

i am trying to create calender control here is my code ...

 <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>

this is the j query template i want to change border color of td, when condition is true it change the border color of td but only 3 edges not top one.

• javascript
• jquery
• css
• html-table

Share Improve this question Follow edited Aug 17, 2012 at 13:39 Arun P Johny 388k6868 gold badges531531 silver badges532532 bronze badges asked Aug 17, 2012 at 11:16 RajRaj 36122 gold badges1313 silver badges3030 bronze badges 5

• 3 Raj, Please accept some answers for your previous questions. Also post what you have tried so that people can help you better. – Shoban Commented Aug 17, 2012 at 11:17
• yes but how to accept? i dont know the procedure? – Raj Commented Aug 17, 2012 at 11:19
• 1 Each answer to all your questions has an outlined tick - click the tick next to the answer which you found most helpful (additionally, if there are 2 answers which are useful, you might want to accept one but upvote the other 1 to signify it helped) – ChrisW Commented Aug 17, 2012 at 11:20
• 1 Rather than trying to set the styles specifically, it would probably be simpler to set a css style from JavaScript. Is your difficulty around using CSS, or JavaScript? – Richard Ev Commented Aug 17, 2012 at 11:21
• what condition? is the condition available at the td creation time? – Arun P Johny Commented Aug 17, 2012 at 13:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I think what you are looking for is

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

You can see it in action here.

@Raj - take a look at the Mozilla Developer site for basic information and ask questions once you have tried out a few things.

Incidentally, this is a similar approach to @Arun P Johny's answer but implemented with Jquery: http://codepen.io/5arx/pen/djhJE

If you want to do it purely in CSS, note that you need to to set the full border style on the td - if you only set the colour, only those borders which aren't affected by styles of other lines are affected (I think that understanding the full reasons behind this are fairly technical and plicated!).

In this example, the red bordered cell has 1 px solid red applied, but because the pink bordered td only has the colour specified, the bottom border (which is part of table and tr) is not affected, and so on..