SPAN object (Object/HTML)

An object that encapsulates the contents of an inline <SPAN> tag.

Availability:

JScript - 3.0
Internet Explorer - 4.0
Inherits from:Element object
JavaScript syntax:IEmySPAN = myDocument.all.anElementID
IEmySPAN = myDocument.all.tags("SPAN")[anIndex]
IEmySPAN = myDocument.all[aName]
-mySPAN = myDocument.getElementById(anElementID)
-mySPAN = myDocument.getElementsByName(aName)[anIndex]
-mySPAN = myDocument.getElementsByTagName("SPAN")[anIndex]
HTML syntax:<SPAN> ... </SPAN>
Argument list:anIndexA reference to an element in a collection
aNameAn associative array reference
anElementIDThe 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:

Example code:

   <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

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
dataFld n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
dataFormatAs n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
dataSrc n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-

Event nameJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
onBlur n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
onClick n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onDblClick n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onDragStart n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onFilterChange n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onHelp n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
onKeyDown n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onKeyPress n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onKeyUp n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onMouseDown n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onMouseMove n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onMouseOut n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onMouseOver n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onMouseUp n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onSelectStart n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-

Inheritance chain:

Element object, Node object