Hi,
How to add Style or CSS to dynamically created HTML elements in Javascript
I have created HTML (Div,Image, Table) element dynamically in Javascript. But to apply style to this element. I wants to print a page with header title and Image logo. Here is my Code. For Example, I wants to add background Image in "Div id="logoarea"" or in "img id="img"" area and also wants to apply style in h1,p,div and table.How to apply style to those?
<script type="text/javascript">
function PrintDiv() {
var divContents = document.getElementById("Empdetails").innerHTML;
var printWindow = window.open();
printWindow.document.write('<html><head><title>Employee Details</title>');
printWindow.document.write('</head><body >');
printWindow.document.write('<div id="printhead" style="width:99%;height:auto;height:120px;padding:10px;">');
printWindow.document.write('<table id="headtable" style="width: 100%;height:100%;text-align: center;"><tbody><tr><td style="width: 5%;">');
printWindow.document.write('<div id="logoarea" style="width: 100px;height: 100px;padding: 5px;float: left;background: url("images/headlogo.jpg");background-repeat: no-repeat;background-size: cover;"><img id="img" src="~/images/HeadLogo.jpg" /></div></td><td style="width: 97%;background: radial-gradient(ellipse at center, #533ce1 0%, #4087ea 100%);background-size: 250% 250%;>');
printWindow.document.write('<div id="headtitlearea" style="width: 95%;height: 100px;max-height:150px;padding: 0px 0px 0px 0px;float: right;text-align: center;"><h1 style="color: black;font-size: 20px;font-family: "Cooper Black";text-align: center;padding-bottom: 10px;">Department of School Education</h1><p style="font-family: "Chaparral Pro";font-size: 12px;font-style: italic;color: black;text-align: justify;">Government of West bengal</p></div></td></tr>');
printWindow.document.write('<tr><td colspan="2"><p style="font-family: "Chaparral Pro";font-size: 18px;font-style: italic;color: black;text-align: justify;">Employee Details</p></td></tr>');
printWindow.document.write('</tbody></table></div>');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}
</script>
