I would like to change CSS of a page in Runtime. How to achieve this.

<script type="text/javascript" language="javascript">
   
 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
   //Non-IE
   myWidth = window.innerWidth;
   myHeight = window.innerHeight;
 } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
   //IE 6+ in 'standards compliant mode'
   myWidth = document.documentElement.clientWidth;
   myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
   //IE 4 compatible
   myWidth = document.body.clientWidth;
   myHeight = document.body.clientHeight;
 }
           if (myWidth <=800)
           {
           document.write('<link href="App_Themes/Theme1/Css/Main800.css" rel="stylesheet" type="text/css" />');
           }
           if (myWidth <= 1024)
           {
           document.write('<link href="App_Themes/Theme1/Css/Main1024.css" rel="stylesheet" type="text/css" />');
           }
           if (myWidth >=1024)
           {
           document.write('<link rel="stylesheet" type="text/css" href="App_Themes/Theme1/Css/Main1280.css" />');
           }
           if (myWidth = 0) {
               document.write('<link rel="stylesheet" type="text/css" href="App_Themes/Theme1/Css/Main1024.css" />');
           }

 </script>