i write css generator in javascript how can change this code that generator css will be in child window and in parent window will only result of css generator ? <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="styles.css" type="text/css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> var w1,w2; var ls = 0; var wd = 0; var st = "none"; var cl = "black"; var params="height=300, width=300, left=550, top=150"; $(document).ready(function(){ $("#but1").click(function(){ newText(); }) }); function newText(){ $("#testedText").text("ABCDE"); } $(document).ready(function(){ $("#but2").click(function(){ openWin1(1); }) }); function openWin1(x){ w1=window.open("","",params); w1.document.open(); if (x==1){ var txt = '<html><head><link rel="stylesheet" type="text/css" href="styles.css"></head><body>'+ '<form>' + 'Letter-spacing: <input id="space" type="range" min="0" max="100" value="'+ls+'" oninput="window.opener.changeLS();"><br><br>' + '<input type="button" value="Close" onclick="javascript:window.close();"></form></body></html>'; w1.document.write(txt); } else { var txt2='<html><head><link rel="stylesheet" type="text/css" href="styles.css"></head><body>'+ '<form>' + 'Width: <input id="wid" type="range" min="0" max="100" value="'+wd+'" oninput="window.opener.changeBorder()"><br><br>' + 'Colour: <input type="color" id="col" value="'+cl+'" onchange="window.opener.changeBorder()"><br><br>' + 'Style: <select id="style" onchange= "window.opener.changeBorder()">' + '<option selected value="'+st+'">'+st+'</option>' + '<option value="none">None</option>' + '<option value="dotted">Dotted</option>' + '<option value="dashed">Dashed</option>' + '<option value="solid">Solid</option>' + '<option value="double">Double</option>' + '<option value="groove">Groove</option>' + '</select><br><br>'+ '<input type="button" value="Close" onclick="javascript:window.close();"></form></body></html>'; w1.document.write(txt2); } w1.document.close(); } $(document).ready(function(){ $("#prop1").text(ls); }); function changeLS(){ ls = w1.document.getElementById("space").value; $("#testedText").css("letter-spacing", ls+"px"); $("#prop1").text(ls); } $(document).ready(function(){ $("#but3").click(function(){ openWin1(2); }) }); $(document).ready(function(){ $("#prop2").text(wd+"px "+st+" "+cl); }); function changeBorder(){ wd = w1.document.getElementById("wid").value; cl=w1.document.getElementById("col").value; st=w1.document.getElementById("style").value; $("#testedText").css("border",wd +"px "+st+" "+cl); $("#prop2").text(wd+"px "+st+" "+cl); } </script> </head> <body> <div id="view"> <p id="testedText">This is the tested text.</p> </div> <div id="controls"> <form id="panel"> <input type="radio" id="but1" name="knopka" value="Change original text" >Change original text <br> <input type="radio" id="but2" name="knopka" value="Change letter-spacing"> Change letter-spacing<br> <input type="radio" id="but3" name="knopka" value="Change border"> Change border <br> </form> </div> <div id="properties"> <p>Letter-spacing: <span id="prop1"></span> px</p> <p>Border: <span id="prop2"></span></p> </div> </body> </html> Code (JavaScript):