 | JavaScript | |||
|---|---|---|---|---|
| Prev | Home | Up | Next |
| Availability: |
| |||
| Inherits from: | Element object | |||
| JavaScript syntax: | IE | mySPAN = myDocument.all.anElementID | ||
| IE | mySPAN = myDocument.all.tags("SPAN")[anIndex] | |||
| IE | mySPAN = myDocument.all[aName] | |||
| - | mySPAN = myDocument.getElementById(anElementID) | |||
| - | mySPAN = myDocument.getElementsByName(aName)[anIndex] | |||
| - | mySPAN = myDocument.getElementsByTagName("SPAN")[anIndex] | |||
| HTML syntax: | <SPAN> ... </SPAN> | |||
| Argument list: | anIndex | A reference to an element in a collection | ||
| aName | An associative array reference | |||
| anElementID | The ID value of an Element object | |||
| Object properties: | dataFld, dataFormatAs, dataSrc | |||
| Event handlers: | onBlur, onClick, onDblClick, onDragStart, onFilterChange, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onSelectStart | |||
<SPAN> tags and the objects that represent them are inline elements. Placing them into a document does not create a line break.
Note that a positioned <SPAN> elements will appear as a member of the document.layers[] collection in Netscape 4.
The example shows how properties of <SPAN> blocks can be moved from one to another. In this example, the background color of each block is moved along to the next in a cyclic manner as the mouse is clicked:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SPAN ID="AAA" STYLE="background-color:RED">ONE</SPAN>
<SPAN ID="BBB" STYLE="background-color:BLUE">TWO</SPAN>
<SPAN ID="CCC" STYLE="background-color:GREEN">THREE</SPAN>
<SPAN ID="DDD" STYLE="background-color:CYAN">FOUR</SPAN>
<SPAN ID="EEE" STYLE="background-color:YELLOW">FIVE</SPAN>
<SPAN ID="FFF" STYLE="background-color:GRAY">SIX</SPAN>
<FORM>
<INPUT TYPE="button" VALUE="CLICK ME" onClick="clickMe()">
</FORM>
<SCRIPT>
//IE only
function clickMe()
{
mySpans = document.all.tags("SPAN");
myStyle1 = mySpans[mySpans.length-1].style.cssText;
for(myEnum=0; myEnum<mySpans.length; myEnum++)
{
myStyle2 = mySpans[myEnum].style.cssText;
mySpans[myEnum].style.cssText = myStyle1;
myStyle1 = myStyle2;
}
}
</SCRIPT>
</BODY>
</HTML>| See also: | Element object |
| Property | JavaScript | JScript | N | IE | Opera | NES | ECMA | DOM | CSS | HTML | Notes |
|---|---|---|---|---|---|---|---|---|---|---|---|
| dataFld |  | 3.0  | | 4.0 | | | | | | | - |
| dataFormatAs | | 3.0 | | 4.0 | | | | | | | - |
| dataSrc | | 3.0 | | 4.0 | | | | | | | - |
| Event name | JavaScript | JScript | N | IE | Opera | NES | ECMA | DOM | CSS | HTML | Notes |
|---|---|---|---|---|---|---|---|---|---|---|---|
| onBlur | | 3.0 | | 4.0 | | | | | | |  |
| onClick | | 3.0 | | 4.0 | | | | | | 4.0 | |
| onDblClick | | 3.0 | | 4.0 | | | | | | 4.0 | |
| onDragStart | | 3.0 | | 4.0 | | | | | | | - |
| onFilterChange | | 3.0 | | 4.0 | | | | | | | - |
| onHelp | | 3.0 | | 4.0 | | | | | | | |
| onKeyDown | | 3.0 | | 4.0 | | | | | | 4.0 | |
| onKeyPress | | 3.0 | | 4.0 | | | | | | 4.0 | |
| onKeyUp | | 3.0 | | 4.0 | | | | | | 4.0 | |
| onMouseDown | | 3.0 | | 4.0 | | | | | | 4.0 | |
| onMouseMove | | 3.0 | | 4.0 | | | | | | 4.0 | |
| onMouseOut | | 3.0 | | 4.0 | | | | | | 4.0 | |
| onMouseOver | | 3.0 | | 4.0 | | | | | | 4.0 | |
| onMouseUp | | 3.0 | | 4.0 | | | | | | 4.0 | |
| onSelectStart | | 3.0 | | 4.0 | | | | | | | - |
| Prev | Home | Next |
| Source text | Up | Special number values |
JavaScript Programmer's Reference, Cliff Wootton Wrox Press (www.wrox.com) Join the Wrox JavaScript forum at p2p.wrox.com Please report problems to support@wrox.com © 2001 Wrox Press. All Rights Reserved. Terms and conditions. | ||