html 測試 左右 各一 測試

html 測試 左右 各一 測試

<!*******************************************************************>

<p style="color:red;font-size:36px;">左側顯示 </p><p style="color:blue;font-size:36px;">右側顯示 </p>

<style>
.RRtext , .LLtext { font-size:110%;
                               display:none;   
                               background-color:azure;     
                               width: 100%;
                               height: 300px;     
                               border: thin solid black;
                               font-size:18px; }
.LRC { cursor:pointer;       
             background-color:gainsboro;       
             float:left; display:       
             table-cell;
             vertical-align: middle;     
             text-align: center;     
             width: 80px;     
             height: 30px;     
            border: thin solid black;     
            overflow:auto;
            font-size:18px ;}

.LLif , .RRif { font-size:110%;
                        background-color:azure;     
                        width: 100%;     
                        height: 300px;     
                        border: thin solid black;
                        font-size:18px;}
</style>
<!-----------------------------reset--------------------------------------->
<script>
function FLRrs(qq1){
Mid= qq1.substring(0,qq1.length-2);
LRd= qq1.substring(qq1.length-2,qq1.length-1);

var x0 = document.getElementById(Mid);
var x1 = x0.getElementsByClassName(LRd+"txt");
document.getElementById(Mid+LRd+"tt").value = x1[0].value;
FLRdp(qq1)
}
</script>
<!-----------------------------input------------------------------------------>
<script>
function FLRtt(qq1){
Mid= qq1.substring(0,qq1.length-2);
LRd= qq1.substring(qq1.length-2,qq1.length-1);
document.getElementById(Mid+LRd+"a").style.backgroundColor = "gainsboro";
document.getElementById(Mid+LRd+"b").style.backgroundColor = "azure";
document.getElementById(Mid+LRd+"tt").style.display='block';   
document.getElementById(Mid+LRd+"ff").style.display='none';
}
</script>

<!--------------------------------display ----------CCK----------------------------------------->
<script>
function FLRdp(qq1){
Mid= qq1.substring(0,qq1.length-2);
LRd= qq1.substring(qq1.length-2,qq1.length-1);
document.getElementById(Mid+LRd+"a").style.backgroundColor = "azure";
document.getElementById(Mid+LRd+"b").style.backgroundColor = "gainsboro";
document.getElementById(Mid+LRd+"tt").style.display='none';   
document.getElementById(Mid+LRd+"ff").style.display='block';
var Ttext = document.getElementById(Mid+LRd+"tt").value;
var Ri= document.getElementById(Mid+LRd+"ff");
Ri.innerHTML = "";
var ifrw = (Ri.contentWindow) ? Ri.contentWindow : (Ri.contentDocument.document) ? Ri.contentDocument.document : Ri.contentDocument;
ifrw .document.open();
ifrw .document.write(Ttext);
ifrw .document.close();
}
</script>

<!--------------------------------LOAD--------------------------------------------------->
<script>
function LRonload(qq1,hh){
var x0 = document.getElementById(qq1);
var x1 = x0.querySelector(".UU1");
var strVar="";
strVar += "<table border=\"2\" style=\"width: 100%;\">";
strVar += "<tbody>";
strVar += "<tr><td width=\"50%\">";
strVar += "<form>";
strVar += "<div class='LRC' id='" + qq1 + "La' onclick='FLRdp(this.id)'>預覽</div>";
strVar += "<div class='LRC' id='" + qq1 + "Lb' onclick='FLRtt(this.id)'>寫程式</div>";
strVar += "<div class='LRC' id='" + qq1 + "Lc' onclick='FLRrs(this.id)'>還原</div>";
strVar += "<textarea style='height:" + hh + "px' class='LLtext' id='" + qq1 + "Ltt' spellcheck='false' wrap='logical'>LLLLLLLLLLLLLLLLL";
strVar += "<\/textarea>";
strVar += "<iframe style='height:" + hh + "px'  class='LLif' id='" + qq1 + "Lff' ><\/iframe>";
strVar += "<\/form>";
strVar += "<\/td><td>";
strVar += "<form>";
strVar += "<div class='LRC' id='" + qq1 + "Ra' onclick='FLRdp(this.id)'>預覽</div>";
strVar += "<div class='LRC' id='" + qq1 + "Rb' onclick='FLRtt(this.id)'>寫程式</div>";
strVar += "<div class='LRC' id='" + qq1 + "Rc' onclick='FLRrs(this.id)'>還原</div>";
strVar += "<textarea style='height:" + hh + "px'  class='LLtext' id='" + qq1 + "Rtt' spellcheck='false' wrap='logical'>RRRRRRRRRRRRRRRRRRRRR";
strVar += "<\/textarea>";
strVar += "<\/form>";
strVar += "<iframe style='height:" + hh + "px' class='RRif' id='" + qq1 + "Rff' ><\/iframe>";

strVar += "<\/td><\/tr>";
strVar += "<\/tbody><\/table>";
x1.innerHTML=strVar ;
FLRrs(qq1+"La");
FLRrs(qq1+"Ra");
}
</script>
<!*******************************************************************>
<div id="LR123456789" >
<div class="UU1"></div>
<textarea class="Ltxt" spellcheck="false" wrap="logical" style="display:none;">
<p style="color:red;font-size:36px;">
左側顯示
</p>
</textarea>
<textarea class="Rtxt" spellcheck="false" wrap="logical" style="display:none;">
<p style="color:blue;font-size:36px;">
右側顯示
</p>
</textarea>
</div>
<!----------------------------------------------------------------------------------->
<script>
LRonload('LR123456789',"400");
</script>