javascript - HTML Page Layout Change at Runtime -

a html page contains 3 frames.

<frameset cols="30%, *">  <frame src="frame_a.htm">   <frameset rows="60%, *">    <frame src="frame_b.htm">    <frame src="frame_c.htm">  </frameset> </framset> 

what need is, change frames layout 2 other styles on click event of button. page contains 3 buttons, 1) default style, 2) style-2, 3) style-3

<!-- style-2 --> <!-- <frameset cols="*, 30%">  <frameset rows="60%, *">   <frame src="frame_b.htm">   <frame src-"frame_c.htm">  </frameset> <frame src="frame_a.htm"> </frameset> --> <!-- style-3 --> <!-- <frameset cols="30%,35%,35%">   <frame src="frame_a.htm">   <frame src="frame_b.htm">   <frame src="frame_c.htm"> </frameset> --> 

how can this, when page loaded , user click button 2 or 3 , page changes style 2 or 3 respectively.

css can handy option, don't want use css here. guide me in regard.

jsfiddle demo

the demo won't allow me add buttons frame i've added prompt can refresh page , enter new value see different style.

html:

<button id="btn1">default</button> <button id="btn2">style 1</button> <button id="btn3">style 2</button> 

js:

$('#btn1').click(function () {     $('#fset1').attr('cols', '30%, *');     $("#frame1").appendto("#fset1");     $("#frame2").appendto("#fset2");     $("#frame3").appendto("#fset2");     $('#fset2').appendto("#fset1"); }); $('#btn2').click(function () {     $('#fset2').appendto("#fset1");     $('#fset1').attr('cols', '*, 30%');     $("#frame1").appendto("#fset2");     $("#frame2").appendto("#fset2");     $("#frame3").appendto("#fset1"); }); $('#btn3').click(function () {     $('#fset1').attr('cols', '30%,35%,35%');     $("#frame1").appendto("#fset1");     $("#frame2").appendto("#fset1");     $("#frame3").appendto("#fset1");     $('#fset2').appendto("#fset1"); });