JavaScript - Set 3JavaScript Tool Box (Command Set)
innerHTML
innerHTML element
<html>
<head>
<title>Object Model</title>
<script type = "text/javascript">
<!--
var elements = "";
function start()
{
for ( var loop = 0; loop < document.all.length; ++loop )
elements += "<br />" + document.all[ loop ].tagName;
pText.innerHTML += elements;
alert( elements );
}
</script>
</head>
<body onload = "start()">
<p id = "pText">Elements on this Web page:</p>
</body>
</html>
outerHTML, object and tagName:
<html>
<head>
<title>Object Model</title>
<script type = "text/javascript">
<!--
var elements = "<ul>";
function child( object )
{
var loop = 0;
elements += "<li>" + object.tagName + "<ul>";
for ( loop = 0; loop < object.children.length; loop++ )
{
if ( object.children[ loop ].children.length )
child( object.children[ loop ] );
else
elements += "<li>" +
object.children[ loop ].tagName +
"</li>";
}
elements += " </ul> ";
}
// -->
</script>
</head>
<body onload = "child( document.all[ 4 ] );
myDisplay.outerHTML += elements;">
<p>Welcome to our <strong>Web</strong> page!</p>
<p id = "myDisplay">
Elements on this Web page:
</p>
</body>
</html>
Dynamic Positioning and Animation:
<html>
<head>
<title>Dynamic Positioning</title>
<script type = "text/javascript">
<!--
var speed = 5;
var count = 10;
var direction = 1;
var firstLine = "Text growing";
var fontStyle = [ "serif", "sans-serif", "monospace" ];
var fontStylecount = 0;
function start()
{
window.setInterval( "run()", 100 );
}
function run()
{
count += speed;
if ( ( count % 200 ) == 0 ) {
speed *= -1;
direction = !direction;
pText.style.color =
( speed < 0 ) ? "red" : "blue" ;
firstLine =
( speed < 0 ) ? "Text shrinking" : "Text growing";
pText.style.fontFamily =
fontStyle[ ++fontStylecount % 3 ];
}
pText.style.fontSize = count / 3;
pText.style.left = count;
pText.innerHTML = firstLine + "<br /> Font size: " +
count + "px";
}
// -->
</script>
</head>
<body onload = "start()">
<p id = "pText" style = "position: absolute; left: 0;
font-family: serif; color: blue">
Welcome!</p>
</body>
</html>
Setting Background Color:
<html>
<head>
<title>Object Model</title>
<script type = "text/javascript">
<!--
function start()
{
var inputColor = prompt(
"Enter a color name for the " +
"background of this page", "" );
document.body.style.backgroundColor = inputColor;
}
// -->
</script>
</head>
<body onload = "start()">
<p>Welcome to our Web site!</p>
</body>
</html>
Scripting in Frames:
Master/Parent Frameset "index.html"
=
<html>
<head>
<title>Frames
collection</title>
</head>
<frameset rows = "100, *">
<frame src = "top.html" name
= "upper" />
<frame src = "" name =
"lower" />
</frameset>
</html>
"top.html" =
<html>
<head>
<title>The frames
collection</title>
<script type = "text/javascript">
<!--
function start()
{
var text = prompt( "What is your name?", "" );
parent.frames( "lower" ).document.write(
"<h1>Hello, " + text + "</h1>" );
}
// -->
</script>
</head>
<body onload = "start()">
<h1>Cross-frame scripting!</h1>
</body>
</html>
Redirecting Different Web Browsers to Different Pages:
<script type = "text/javascript">
<!--
function start()
{
if ( navigator.appName == "Microsoft Internet Explorer" )
{
if ( navigator.appVersion.substring( 1, 0 ) >= "4" )
document.location = "newIEversion.html";
else
document.location = "oldIEversion.html";
}
else
document.location = "NSversion.html";
}
// -->
</script>
Using innerText to change text inside element tags:
<html>
<head>
<title>Object Model</title>
<script type = "text/javascript">
<!--
function start()
{
alert( pText.innerText );
pText.innerText = "Thanks for coming.";
}
// -->
</script>
</head>
<body onload = "start()">
<p id = "pText">Welcome to our Web page!</p>
</body>
</html>
|
Contact
