How to change css dynamic by javascript

How to change css dynamic by javascript

i have a style on header empty like
<style>
.cls{
}
</style>
I want to change it dynamic by click example to
<style>
.cls{
font-size: 15px;
font-family : Arial, Verdana;
border: 1px solid blue;
background-color: yellow;
}
</style>
Here is my code http://jsfiddle.net/nyf7T/
<script>
function changeCSS () {
var style = 'font-size: 15px;'
+ 'font-family : Arial, Verdana;'
+ 'border: 1px solid blue ;'
+ 'background-color: yellow;';
alert(style);
}
</script>
<style>
.cls{
}
</style>
<div>
<table style="margin:5px;">
<tr>
<td class="cls">
abcd
</td>
</tr>
</table>
</div>
<a href="#" onclick="changeCSS();">Setstyle</a>
How to do that thank.