README.md

December 4, 2022 ยท View on GitHub

Creating StyleSheets dynamically using javascript

Description

Creates StyleSheets Dynamically

More Info

Submitted On
BySanjeev Kaushik
LevelAdvanced
User Rating3.6 (25 globes from 7 users)
Compatibility
Category.JS files
WorldJava
Archive File

API Declarations

Creating StyleSheets Dynamically <script language=javascript> var mysheets = new Array(); var i = 0, x = 230, y = 150 var n = 1 function addit(){ mysheets[i] = document.createElement("div") with(mysheets[i].style) { width = 100 position = "absolute" cursor = "hand" height = 30 backgroundColor = "maroon" left = x top = y } mysheets[i].innerHTML = "<marquee> Sanjeev Kaushik" document.body.appendChild(mysheets[i]) mysheets[i].onclick = addit i++ y += 50 } function removeit(){ if(mysheets.length == 0) return; lastItem = mysheets[mysheets.length -1] document.body.removeChild(lastItem) mysheets[mysheets.length -1] = null tempArr = new Array() for(i=0;i <body onload="init()"> Hi Friends,
Here is the way, how you can create style sheets dynamically. By this you can do make tree structure, directory structure or animation game. This is mere an idea.
Add
Remove

Source Code

<html>
<head>
<meta author="Sanjeev" content="creating dynamic style sheets">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Creating StyleSheets Dynamically</title>
<script language=javascript>
var mysheets = new Array();
var i = 0, x = 230, y = 150
var n = 1
function addit(){
	mysheets[i] = document.createElement("div")
	with(mysheets[i].style)	{
		width = 100
		position = "absolute"
		cursor = "hand"
		height = 30
		backgroundColor = "maroon"
		left = x
		top = y
	}
	mysheets[i].innerHTML = "<font color=ivory><marquee> Sanjeev Kaushik</marquee></font>"
	document.body.appendChild(mysheets[i])
	mysheets[i].onclick = addit
	i++
	y += 50
}
function removeit(){
	if(mysheets.length == 0)
		return;
	lastItem = mysheets[mysheets.length -1]
	document.body.removeChild(lastItem)
	mysheets[mysheets.length -1] = null
	tempArr = new Array()
	for(i=0;i<mysheets.length;i++) {
		if(mysheets[i] != null)
			tempArr[i] = mysheets[i]
	}
	mysheets = tempArr
	y -= 50
}
var mytimer
function init() {
	if(n < 5) {
		mytimer = setTimeout("init()",1000)
		addit()
	}else if (n < 9) {
		mytimer = setTimeout("init()",1000)
		removeit()
	}else {
		clearTimeout(mytimer)
		n = 0
		return false
	}
	n++
}
</script>
</head>
<body onload="init()">
<b>Hi Friends,</b>
<br>
<font color=maroon>
Here is the way, how you can create style sheets dynamically. By this you can do make tree structure, directory structure or animation game. This is mere an idea.
</font>
<div align=center id=mya1 title="Add an element" style="position:absolute;left:200;top:100;width:80;background-color:red;cursor:hand" onClick="addit()">
Add
</div>
<div id=mya2 align=center title="Remove an element" style="position:absolute;left:300;top:100;width:80;background-color:green;cursor:hand" onClick="removeit()">
Remove
</div>
</body>
</html>