런타임시 HTML 페이지 레이아웃 변경

Question

HTML 페이지에는 세 개의 프레임이 있습니다.

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

내가해야 할 일은 단추의 클릭 이벤트에서 프레임 레이아웃을 다른 두 가지 스타일로 변경하는 것입니다. 페이지는 세 개의 버튼, 1) 기본 스타일을 포함 2) 스타일-2, 3) 스타일-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> 
--> 

나는이 작업을 수행 할 수있는 방법, 페이지가로드 될 때 사용자가 클릭 버튼을 2 ~ 3 페이지 변경 스타일 2 또는 3이다.

CSS는 편리한 옵션 일 수 있지만 여기서는 CSS를 사용하고 싶지 않습니다. 이 점에 대해 안내하십시오.

Answer 1

jsFiddle Demo

데모는 당신이 그렇게 다른 스타일을 볼 수있는 페이지를 새로 고침하고 새 값을 입력 할 수 있도록 내가 프롬프트를 추가했습니다, 그래서 내가 프레임에 버튼을 추가 할 수 없습니다.

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"); 
});