D Js Referrence

JavaScript DOM style properties (important), JavaScript DOM Samples
javascript dom object, dom methods javascript, onclick method javascript, array
methods javascript, string methods javascript
dom object attributes, dom div object, dom element object
js in built function
js inbuilt method
js property
------------------------------------------------------------------------------------------------------------------------------------------SOURCE: http://programming.top54u.com/Samples/Javascript/Javascript-DOM/Document
-getElementById/Default.aspx
1. Change Div Background Image
-------------------------------<html>
<head>
<title>Javascript Change Div Background Image</title>
<style type="text/css">
#div1 {
width:100px;
height:30px;
background-image:url(images/blue.gif);
}
p {
font-family:Verdana;
font-weight:bold;
font-size:11px
}
</style>
<script language="javascript" type="text/javascript">
function changeDivImage()
{
var imgPath = new String();
imgPath = document.getElementById("div1").style.backgroundImage;
if(imgPath == "url(images/blue.gif)" || imgPath == "")
{
document.getElementById("div1").style.backgroundImage = "url(images/
green.gif)";
}
else
{
document.getElementById("div1").style.backgroundImage = "url(images/
blue.gif)";
}
}
</script>
</head>
<body>
<center>
<p>
This Javascript Example will change the background image of<br />
HTML Div Tag onclick event.
</p>
<div id="div1">
</div>
<br />
<input type="button" value="Change Background Image" onclick="changeDivImage
()" />
</center>
</body>
</html>
2. JavaScript document.getElementById
-----------------------------------------<html>
<head>
<title>Javascript Document getElementById</title>
</head>
<body>
<div id="div1"></div>
// you can get the HTML object using getElementById method
// and set its innerHTML property
document.getElementById('div1').innerHTML = "document.getElementById method
of JavaScript DOM.";
// You can also set style properties dynamically
// For example in this sample we have set
// border
// margin top
// margin left
// and font color dynamically
document.getElementById('div1').style.border = "solid 5px #c0c0c0";
document.getElementById('div1').style.width = "90%";
document.getElementById('div1').style.marginTop = "10px";
document.getElementById('div1').style.marginLeft = "10px";
document.getElementById('div1').style.color = "#ff0000";
</script>
</body>
</html>
3. JavaScript document.getElementsByName
--------------------------------------------<html>
<head>
<title>Javascript Document getElementsByName Loop</title>
<script type="text/javascript">
function getValues(objName)
{
var arr = new Array();
arr = document.getElementsByName(objName);
alert("total objects with name \"textfield\" = \n" + arr.length);
for(var i = 0; i < arr.length; i++)
{
var obj = document.getElementsByName(objName).item(i);
alert(obj.id + " = " + obj.value);
}
}
</script>
</head>
<body>
<center>
Text1:
<input
Text2:
<input
Text3:
<input
<input
tfield')" />
</center>
</body>
</html>
id="Text1" name="textfield" type="text" value="Hello" /><br />

id="Text2" name="textfield" type="text" value="World" /><br />
id="Text3" name="textfield" type="text" value="!!!" /><br />
id="Button1" type="button" value="submit" onclick="getValues('tex
4. Checkbox Visible True/False

-------------------------------<html>
<head>
<title>Javascript Checkbox Visibility</title>
<script type="text/javascript">
function showHide()
{
if(document.getElementById('Checkbox1').checked)
{
document.getElementById('Text1').style.visibility = 'visible';
}
else
{
document.getElementById('Text1').style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<p>
Check mark the checkbox to set the visiblity property of textbox.
It will allow you to show/hide the textbox control dynamically.
</p>
<p>
<input id="Checkbox1" type="checkbox" onclick="showHide();" checked="che
cked" /><label for="Checkbox1">Show/Hide</label><br /><br />
<input id="Text1" type="text" />
</p>
</body>
</html>
5. Change CSS Class of Div tag
-----------------------------------------<html>
<head>
<title>Javascript Change CSS Class of Div tag</title>
.redText,.blueText {
width: 200px;
font-family: Arial;
}
.redText {
color : red
}
.blueText {
color : blue
}
</style>
function changeCssClass(objDivID)
{
if(document.getElementById(objDivID).className=='redText')
{
document.getElementById(objDivID).className = 'blueText';
}
else
{
document.getElementById(objDivID).className = 'redText';
}
}
</script>
</head>
<body>
<center>
<div id="div1" class="redText">
By default text indside this HTML div tag is red.
Javascript function will change the CSS class<br />
of this Div tag and <br />
text color will change to blue dynamically.
</div>
<br />
<input type="button" value="click here" onclick="changeCssClass('div1')"
/>
</center>
</body>
</html>
6.Change Div Background Color Style

-----------------------------------<html>
<head>
<title>Javascript Change Background Color Style</title>
function changeBackgroundColor(objDivID)
{
var backColor = new String();
backColor = document.getElementById(objDivID).style.backgroundColor;
// IE works with hex code of color e.g.: #eeeeee
// Firefox works with rgb color code e.g.: rgb(238, 238, 238)
// Thats why both types are used in If-condition below
if(backColor.toLowerCase()=='#eeeeee' || backColor.toLowerCase()=='r
gb(238, 238, 238)')
{
document.getElementById(objDivID).style.backgroundColor = '#c0c0
c0';
}
else
{
document.getElementById(objDivID).style.backgroundColor = '#eeee
ee';
}
}
</script>
</head>
<body>
<center>
<div id="div1" style="background-color : #EEEEEE; width: 200px; height:
100px">
Javascript will change the background color of this Div tag dynamica
lly.
</div>
<input type="button" value="click here" onclick="changeBackgroundColor('

div1')" />
</center>
</body>
</html>
7.Change Div InnerHTML
----------------------<html>
<head>
<title>Javascript Change Div InnerHTML</title>
function changeDivHTML()
{
var previousInnerHTML = new String();
previousInnerHTML = document.getElementById('div1').innerHTML;
previousInnerHTML = previousInnerHTML.concat("<h1>New HTML Text added to
the div HTML tag.</h1>");
previousInnerHTML = previousInnerHTML.concat("<p align=\"center\">Paragr
aph child HTML element added<br /> to the div tag dynamically.</p>");
previousInnerHTML = previousInnerHTML.concat("<span style=\"color:#ff000
0\">Span child HTML element added to the div tag dynamically.</span>");
document.getElementById('div1').innerHTML = previousInnerHTML;
}
</script>
</head>
<body>
<div id="div1">
<b>innerHTML</b> placed inside the <b>div</b> element of HTML.<br />
Javascript will change the innerHTML of this HTML div element.
</div>
<center>
<input type="button" value="Change Div innerHTML" onclick="changeDivHTML
()" />
</center>
</body>
</html>
8. Change Text Color of HTML Elements

-------------------------------------<html>
<head>
<title>Javascript Change Text Color of HTML Elements</title>

function changeDivTextColor()
{
document.getElementById('div1').style.color = 'red';
}
function changeSpanTextColor()
{
document.getElementById('span1').style.color = '#0000ff';
}
function changeParaTextColor()
{
document.getElementById('para1').style.color = 'darkgreen';
}
</script>
</head>
<body>
<div id="div1">
Javascript will change the text color of this Div tag dynamically.
</div>
<p id="para1">
This text is inside the HTML paragraph p tag. <span id="span1">This text
inside the
HTML span element placed inline to parapgraph p tag. </span>
</p>
<center>
<input style="width: 250px" type="button" value="Change Div text color"
onclick="changeDivTextColor()" /><br /><br />
<input style="width: 250px" type="button" value="Change Paragraph text c
olor" onclick="changeParaTextColor()" /><br /><br />
<input style="width: 250px" type="button" value="Change Span text color"
onclick="changeSpanTextColor()" />
</center>
</body>
</html>
9. Change Span InnerText
------------------------<html>
<head>
<title>Javascript Change Span InnerText</title>
function changeSpanText()
{
var previousInnerText = new String();
previousInnerText = document.getElementById('span1').innerText;
previousInnerText = previousInnerText.concat("\n<b>New Text added to the
span HTML tag.</b>\n");
document.getElementById('span1').innerText = previousInnerText;
}
</script>
</head>
<body>
<p><b>Note:</b>This sample will not work in Firefox because it does not supp
ort innerText property</p>
<span id="span1">innerText placed inside the span element of HTML.<br />
Javascript will change the innerText of this HTML span element. </span>
<br />
<center>
<input type="button" value="Change Span innerText" onclick="changeSpanTe
xt()" />
</center>
</body>
</html>
10. Get Div clientHeight and offsetHeight
------------------------------------------You can get the Div height dynamically using JavaScript DOM methods. JavaScript
document object provides getElementById function that returns the HTML object ac
cording to the specified id of the element. The object returned by getElementByI
d method allows you to access the height of the specified Div element. Following
are the properties accessible through JavaScript DOM:
1. clientHeight
2. offsetHeight
You can learn more about these properties from the tutorial link provided at the
bottom and top of this sample.
Try the sample below to learn the working of JavaScript code for retrieving the
height of the HTML div element dynamically:
<html>
<head>
<title>Javascript Get Div clientHeight and offsetHeight</title>
#div1 {
width:200px;
height:100px;
overflow: scroll;
}
</style>
function getDivHeight()
{
alert("Client Height: " + document.getElementById("div1").clientHeight)
;
alert("Offset Height: " + document.getElementById("div1").offsetHeight)
;
}
</script>
</head>
<body>
<center>
<div id="div1">
Get Div Height using Javscript function. Javascript DOM document can acc
ess the
height of HTML Div element dynamically.
</div>
<br />
<input type="button" value="Get Div Height" onclick="getDivHeight()" />
</center>
</body>
</html>
11. Show Hide Div Visibility
----------------------------<html>
<head>
<title>Javascript Show Hide Div Visibility</title>
.divStyle {
width:200px;
height:100px;
margin:0px auto;
}
</style>
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("div1").style.visibility;
if(divstyle.toLowerCase()=="visible" || divstyle == "")
{
document.getElementById("div1").style.visibility = "hidden";
}
else
{
document.getElementById("div1").style.visibility = "visible";
}
}
</script>
</head>
<body>
<div id="div1" class="divStyle">
Show Hide Div visibility using Javascript DOM.
</div>
<center>
<input type="button" value="show hide div" onclick="showHideDiv()" />

</center>
</body>
</html>
12. Div Collapse Style Using Display None (http://programming.top54u.com/Samples
/Javascript/Javascript-DOM/Div-Collapse-Style-Using-Display-None/Default.aspx)
----------------------------------------------------------------------------------------------------------------------------------------------------------------JavaScript Div Collapse
OM style properties. In
pt DOM has been used to
JavaScript DOM Features
Style functionality can be created by using JavaScript D

this sample Display property of style object of JavaScri
expand or collapse the DIV element dynamically.
Used
1. document object
2. getElementById method
3. style object
4. display property
Display property value "none" releases the white space occupied by the Div eleme
nt.
Try the sample below to learn and practice the JavaScript DOM code for developin
g this functionality:
<html>
<head>
<title>Javascript Div Collapse Style Using Display None</title>
.divStyle {
width:200px;
height:100px;
margin:0px auto;
}
</style>
function displayDiv()
{
var divstyle = new String();
divstyle = document.getElementById("div1").style.display;
if(divstyle.toLowerCase()=="block" || divstyle == "")
{
document.getElementById("div1").style.display = "none";
}
else
{
document.getElementById("div1").style.display = "block";
}
}
</script>
</head>
<body>
<div id="div1" class="divStyle">
Set CSS display property to none or block using Javascript DOM dynamical
ly.
</div>
<center>
<input type="button" value="display Div" onclick="displayDiv()" />
</center>
</body>
</html>
13. Change Image Onmouseover
----------------------------<html>
<head>
<title>Javascript Change Image Onmouseover</title>
p {
font-family:Verdana;
font-weight:bold;
font-size:11px
}
img {
cursor:pointer;
}
</style>
function mouseOverImage()
{
document.getElementById("img1").src = "images/green.gif";
}
function mouseOutImage()
{
document.getElementById("img1").src = "images/blue.gif";
}
</script>
</head>
<body>
<p>
This Javascript Example will change the image of<br />
HTML image Tag onmouseover event.</p>
<center>
<img id="img1" src="images/blue.gif" alt="image rollover" onmouseover="m
ouseOverImage()"
onmouseout="mouseOutImage()" />
</center>
</body>
</html>
14. Change Hyperlink Text Color Onmouseover (http://programming.top54u.com/Samp
les/Javascript/Javascript-DOM/Change-Hyperlink-Text-Color-Onmouseover/Default.as
px)
--------------------------------------------------------------------------------------------------------------------------------------------------------------------JavaScript HyperLink Rollover effect to change the text color onmouseover functi
onality can be created by using JavaScript DOM methods and onmouseover event of
HTML anchor a tag. You can call the JavaScript functions for changing the color
onmouseover and onmouseout events. In this sample we have used to types of metho
ds to change the font color of Hyperlink text.
1. inline method using JavaScript "this" object that acts as "document.getElemen
tById" object reference.
2. javascript function that accepts 2 parameters as "this" object reference and
color code that is to be applied on text.
JavaScript DOM Features Used
1. this object
2. style object
3. color property
<html>
<head>
<title>Javascript Change Hyperlink Text Color Onmouseover</title>
a {
font-weight:bold;
font-family:verdana;
text-decoration:none;
}
</style>
<script type="text/javascript" language="javascript">
function changeColor(idObj,colorObj)
{
document.getElementById(idObj.id).style.color = colorObj;
}
</script>
</head>
<body>
<a href="#" style="color: #000000" onmouseover="this.style.color='#FF0000'"

onmouseout="this.style.color='#000000'">
Link 1</a>
<br />
<br />
<a href="#" style="color: #999999" onmouseover="this.style.color='#008000'"
onmouseout="this.style.color='#999999'">
Link 2</a>
<br />
<br />
<a href="#" style="color: #FF0000" onmouseover="this.style.color='blue'" onm
ouseout="this.style.color='#FF0000'">
Link 3</a>
<br />
<br />
<a id="lnk1" href="#" style="color: #008000" onmouseover="changeColor(this,'
#FF0000');"
onmouseout="changeColor(this,'#008000');">Link Color change using javasc
ript function</a>
</body>
</html>
15. Disable Input Text Selection
--------------------------------Using JavaScript code you can disable the selection events of HTML web page as w
ell as Input text box. JavaScript code enables you to display the content in a p
rotected way that is not allowed to be selected using mouse events. You can use
the following events to stop their action while user is trying to select the con
tent of your HTML web page:
1. onselect
2. onselectstart
3. onmousedown
JavaScript provides a "return" statement that can be used to stop the event acti
on. You can use "return false" to disable these events.
<html>
<head>
<title>Javascript Disable Input Text Selection</title>
</head>
<body onmousedown="javascript:return false;" onselectstart="javascript:return fa
lse;">
<p>
Try to select the text inside the textbox or this paragraph.
</p>
<center>
<input onselect="return false" onmousedown="return false" type="text" value=
"disabled text" />
</center>
</body>
</html>
16. Create Div Element Dynamically

----------------------------------JavaScript DOM methods and properties also provide the functionality to create t
he DIV element dynamically. You can also customize the appearance of DIV tag pro
gramatically using JavaScript style object properties.
1. document object
2. createElement method
3. style object
4. ClassName property
5. margin property
6. innerHTML property
7. setAttribute method
8. id property
9. document.body.appendChild method
Try the sample below to learn and practice the JavaScript DOM code for creating
the DIV element dynamically:
<html>
<head>
<title>Javascript Create Div Element Dynamically</title>
.dynamicDiv {
width:200px;
height:100px;
border:solid 1px #c0c0c0;
background-color:#e1e1e1;
font-size:11px;
color:#000;
padding:5px;
}
</style>

function createDiv()
{
var divTag = document.createElement("div");
divTag.id = "div1";
divTag.setAttribute("align","center");
divTag.style.margin = "0px auto";
divTag.className ="dynamicDiv";
divTag.innerHTML = "This HTML Div tag created using Javascript DOM dynam
ically.";
document.body.appendChild(divTag);
}
</script>
</head>
<body>
<p align="center">
<b>Click this button to create div element dynamically:</b>
<input id="btn1" type="button" value="create div" onclick="createDiv();"
/>
</p>
</body>
</html>
17. Append Div Content Dynamically

----------------------------------In the previous sample we learnt the JavaScript code to create the DIV tag dynam
ically. In this sample we will learn how to append the child items of Div elemen
t dynamically.
1. document object
3. style object
5. margin property
7. setAttribute method
8. id property
9. appendChild method
the DIV element dynamically and append the Div content dynamically:
<html>
<head>
<title>Javascript Append Div Content Dynamically</title>
.dynamicDiv {
width:200px;
height:100px;
border:solid 1px #c0c0c0;
background-color:#e1e1e1;
font-size:11px;
color:#000;
padding:5px;
}
</style>
function createDiv()
{
var divTag = document.createElement("div");
divTag.id = "div1";
divTag.setAttribute("align","center");
divTag.style.margin = "0px auto";
divTag.className ="dynamicDiv";
divTag.innerHTML = "This <b>HTML Div tag</b> is created using Javasc
ript DOM dynamically.";
document.body.appendChild(divTag);
var pTag = document.createElement("p");
pTag.setAttribute("align","center");
pTag.innerHTML = "This paragraph <b>HTML p tag</b> is added dynamica
lly inside the div tag.";
document.getElementById("div1").appendChild(pTag);
}
</script>
</head>
<body>
<p align="center">
<b>Click this button to Create and Append the Div content:</b>
<input id="btn1" type="button" value="create div" onclick="createDiv();"
/>
</p>
</body>
</html>
18. Create Span Using document.createElement Dynamically (http://programming.to
p54u.com/Samples/Javascript/Javascript-DOM/Create-Span-Using-Document-createElem
ent/Default.aspx)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------JavaScript DOM methods and properties also provide the functionality to create t
he Span element dynamically. You can also customize the appearance of Span tag p
rogramatically using JavaScript style object properties or DOM ClassName propert
y.
1. document object
5. id property
6. document.body.appendChild method
the Span element dynamically:
<html>
<head>
<title>Javascript Create Span Using Document CreateElement Dynamically</titl
e>
.dynamicSpan {
font-size:11px;
color:Orange;
}
</style>
function createSpan()
{
var spanTag = document.createElement("span");
spanTag.id = "span1";
spanTag.className ="dynamicSpan";
spanTag.innerHTML = "<b>HTML Span tag</b> created by using Javascript DO
M dynamically.";
document.body.appendChild(spanTag);
}
</script>
</head>
<body>
<center>
<b>Click this button to create Span Tag dynamically:</b>
<input id="btn1" type="button" value="create span" onclick="createSpan()
;" />
</center>
<br />
</body>
</html>
19. Change Previous Next Background image

-----------------------------------------The JavaScript style object provides the access to the backgroundImage property
that enables you to change the background image of targeted HTML element. In thi
s sample we have used the HTML anchor tag hyperlinks to change the background im
age of the HTML Div tag. The onclick event of HTML hyperlinks raise the client s
ide click event that allow you to call the JavaScript functions. In the HTML cod
e we have also used the HTML hidden field control to store the value of Array in
dex that is used in the JavaScript code to display the background image stored a
t that array index.
JavaScript DOM features Used
1. document object
2. getElementsById method
3. style object
4. backgroundmage property
Try the sample below to understand the functionality of using Hyperlink tags of
HTML to change the background image of div tag dynamically using JavaScript.
<html>
<head>
<title>Changing Previous Next Background-image Using Javascript</title>
#div1 {
height: 38px;
width: 120px;
background-image: url(images/image1.jpg);
background-repeat: no-repeat;
}
</style>
// create an array to store the names of images
var myArr = new Array();
myArr[0] = 'images/image1.jpg';
// A global variable
var hiddenArrayIndex;
// this function will change the image to the previous image
// stored in the array
function movePrevious(){
// get the value stored in the hidden field
hiddenArrayIndex = document.getElementById('hiddenValue').value;
// if the value is not 0 then decrement the value by 1 and
// store it back into the hidden field.
if(hiddenArrayIndex != 0) {
document.getElementById('hiddenValue').value = parseInt(hiddenArrayI
ndex) - 1;
// re-assign the value to the hiddenArrayIndex variable
}
// set the background-image stored at the specified Array Index dynamica
lly
document.getElementById("div1").style.backgroundImage = "url(" + myArr[h
iddenArrayIndex] + ")";
}
// this function will change the image to the next image
// stored in the array
function moveNext(){
// get the value stored in the hidden field
// if the value is not equal to the upper index of the array
// then increment the value by 1 and store it back into the hidden field
if(hiddenArrayIndex != (myArr.length - 1)) {
document.getElementById('hiddenValue').value = parseInt(hiddenArrayI
ndex) + 1;
// re-assign the value to the hiddenArrayIndex variable

}
// set the background-image stored at the specified Array Index dynamica
lly
document.getElementById("div1").style.backgroundImage = "url(" + myArr[h
iddenArrayIndex] + ")";
}
</script>
</head>
<body>
<br />
<br />
<center>
<div id="div1">
</div>
<br />
<a id="prev" href="#" onclick="movePrevious();">prev</a>

<a id="next" href="#" onclick="moveNext();">next</a>
</center>
<input type="hidden" id="hiddenValue" value="0" />
</body>
</html>

D Js Referrence

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

D Js Referrence

Uploaded by

Copyright:

Available Formats

JavaScript DOM style properties (important), JavaScript DOM Samples

id="Text1" name="textfield" type="text" value="Hello" /><br />

4. Checkbox Visible True/False

6.Change Div Background Color Style

<input type="button" value="click here" onclick="changeBackgroundColor('

8. Change Text Color of HTML Elements

<script language="javascript" type="text/javascript">

<input type="button" value="show hide div" onclick="showHideDiv()" />

Style functionality can be created by using JavaScript D

<a href="#" style="color: #000000" onmouseover="this.style.color='#FF0000'"

16. Create Div Element Dynamically

<script type="text/javascript" language="javascript">

17. Append Div Content Dynamically

19. Change Previous Next Background image

// re-assign the value to the hiddenArrayIndex variable

You might also like