How to change <TD> forecolor/text color and also boder color using javascript

Question

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.

Answer 1

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 complicated!).

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

Answer 2

@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

Answer 3

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.