Set - 6

Question 6 :

How to change style on an element?

Answer :

Between CSS and javascript is a weird symmetry. CSS style rules are layed on top of the DOM. The CSS property names like "font-weight" are transliterated into "myElement.style.fontWeight". The class of an element can be swapped out. For example: 
document.getElementById("myText").style.color = "green";
document.getElementById("myText").style.fontSize = "20";
-or-
document.getElementById("myText").className = "regular";


Question 7 :

How to Handle Event Handlers?

Answer :

You can add an event handler in the HTML definition of the element like this,

<script type="text/javascript"><!--
function hitme() {
	alert("I've been hit!");
}
// -->
</script>
<input type="button" id="hitme" name="hitme" value="hit me" onclick="hitme()"

Or, interestingly enough you can just assign the event's name on the object directly with a reference to the method you want to assign.

<input type="button" id="hitme2" name="hitme2" value="hit me2"/>
<script type="text/javascript"><!--
function hitme2() {
	alert("I've been hit too!");
}
document.getElementById("hitme2").onclick = hitme2;
// -->
</script>

You can also use an anonymous method like this:
document.getElementById("hitme3").onclick = function () { alert("howdy!"); }
You can also use the W3C addEvventListener() method, but it does not work in IE yet:

<input type="button" id="hitme4" name="hitme4" value="hit me4"/>
<script type="text/javascript"><!--
function hitme4() { 
	alert("I've been hit four!");
}
if(document.getElementById("hitme4").addEventListener) {
	document.getElementById("hitme4").addEventListener("click", hitme4, false); 
}
// -->
</script>


Question 8 :

How to remove the event listener: ?

Answer :

<script type="text/javascript">
	document.getElementById("hitme4").removeEventListener("click", hitme4, false);
</script>

Key Events
"onkeydown", "onkeypress", "onkeyup" events are supported both in ie and standards-based browsers.

<script type="text/javascript">
function setStatus(name,evt) {
	evt = (evt) ? evt : ((event) ? event : null); /* ie or standard? */
	var charCode = evt.charCode;
	var status = document.getElementById("keyteststatus");
	var text = name +": "+evt.keyCode;
	status.innerHTML = text;
	status.textContent = text;
}
</script>
<form action="">
<input type="text" name="keytest" size="1" value=""
onkeyup="setStatus('keyup',event)" 
onkeydown="setStatus('keydown',event)" 
/>
<p id="keyteststatus">status</p>
</form>


Question 9 :

How to make elements invisible ?

Answer :

Change the "visibility" attribute of the style object associated with your element. Remember that a hidden element still takes up space, use "display" to make the space disappear as well.

if ( x == y) {
	myElement.style.visibility = 'visible';
} else {
	myElement.style.visibility = 'hidden';
}


Question 10 :

How to set the cursor to wait ?

Answer :

In theory, we should cache the current state of the cursor and then put it back to its original state. 
document.body.style.cursor = 'wait'; 
//do something interesting and time consuming
document.body.style.cursor = 'auto';