The <DIV>
element is a block element that is basically used as a 'container' to contain other HTML elements and display them discretely from the rest of the document by adding paragraph breaks before and after the contents of the <DIV>
element.
<DIV>
can contain any HTML between its opening and closing elements and accepts the following attributes:
ALIGN
The ALIGN
attribute sets the alignment of the <DIV>
contents block. It can accept values of center
, left
and right
.
CLASS
The CLASS
attribute is used to specify the <DIV>
element as using a particular style sheet class. See the Style Sheets topic for details.
DATAFLD
The DATAFLD
attribute can be used to specify a data column name from the Data source (see DATASRC
) that the <DIV>
is bound to. For more information on the DATAFLD
attribute, see the Data Binding topic. As <DIV>
is a container element, the data retrieved from the data source will be used for the contents of the <DIV>
element, rather than one of its attributes.
DATAFORMATAS
When the <DIV>
element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS
attribute should be set to "TEXT
" or "HTML
" accordingly. with DATAFORMATAS="HTML"
, the data provided for the <DIV>
element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS
attribute, see the Data Binding topic.
DATASRC
The DATASRC
attribute can be used to specify a data source that the <DIV>
is bound to. For more information on the DATASRC
attribute, see the Data Binding topic.
ID
The ID
attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DIV>
element for scripting purposes. Any <DIV>
element with an ID
attribute can be directly manipulated in script by referencing its ID
attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.
LANG
The LANG
attribute can be used to specify what language the <DIV>
element is using. It accepts any valid ISO standard language abbreviation (for example "en"
for English, "de"
for German etc.) For more details, see the Document Localisation section for more details.
LANAGUAGE
The LANGUAGE
attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DIV>
element. It can accept values of vbscript
, vbs
, javascript
or jscript
. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE
attribute is set.
STYLE
As well as using previously defined style sheet settings, the <DIV>
element can have in-line stylings attached to it. See the Style Sheets topic for details.
TITLE
The Internet Explorer 4.0 (and above) specific TITLE
attribute is used for informational purposes. If present, the value of the TITLE
attribute is presented as a ToolTip when the users mouse hovers over the <DIV>
section.
Internet Explorer supports the use of the <DIV>
element (as well as the above method) when used with the ActiveX HTML Layout Control and Style Sheets. This allows sections of a HTML document to be authored with a fixed layout, according to the W3C 2-D layout specification. Browsers normally determine the best possible layout for HTML, but sections authored using the HTML Layout Control are fixed. Users should seek out the ActiveX Control Pad for more information about authoring using the fixed layout control. For Internet Explorer 4.0, the HTML Layout Control has been 'rolled into' the browser, instead of being a separate control, which means that fixed layout portions can now be authored directly in HTML, using Style Sheet Positioning. See the Style Sheets overview for more information.
Every <DIV>
element in a document is an object that can be manipulated through scripting. Note that scripting of the <DIV>
element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape doesn't support scripting of the <DIV>
element.
<DIV...>
Properties
The <DIV...>
element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <DIV>
element supports the following properties:
clientHeight
The clientHeight
property reflects the height (in pixels) of the contents of the <DIV>
element.
clientWidth
The clientWidth
property reflects the width (in pixels) of the contents of the <DIV>
element.
dataFld
The dataFld
property directly reflects, or sets the value of the DATAFLD
attribute (see above). For more information on the DATAFLD
attribute, see the Data Binding topic.
dataFormatAs
The dataFormatAs
property directly reflects, or sets the value of the DATAFORMATAS
attribute (see above). For more information on the DATAFORMATAS
attribute, see the Data Binding topic.
dataSrc
The dataSrc
property directly reflects, or sets the value of the DATASRC
attribute (see above). For more information on the DATASRC
attribute, see the Data Binding topic.
scrollHeight
The scrollHeight
property reflects the contents of the <DIV>
elements total scrollable height (in pixels).
scrollLeft
The scrollLeft
property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <DIV>
element are totally visible on the screen, the scrollLeft
property is 0, only increasing if the left-most edge of the <DIV>
elements contents are scrolled off the left hand edge of the current viewing window.
scrollTop
The scrollTop
property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <DIV>
element, the scrollTop
property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <DIV>
element are visible, then the scrollTop
property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.
scrollWidth
Like the scrollHeight
property, the scrollWidth
property reflects a value that represents the total scrollable width of the contents of the <DIV>
element.
<DIV...>
Methods
The <DIV...>
element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <DIV>
element supports the following methods:
blur
The blur
event can be used to force the users focus away from the referenced <DIV>
element, firing the onblur
event.
focus
The focus
method can be used to pass the users focus to the referenced <DIV>
element, forcing the onfocus
event to fire.
<DIV...>
Events
The <DIV...>
element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <DIV>
element supports the following events:
onblur
When the referenced <DIV>
element loses the users focus, the onblur
event is fired. On the fly form validation can make use of the onblur
event to check form elements as the user is entering information.
onfocus
When the user passes the focus to any <DIV>
element, the onfocus
event is fired for that element.
© 1995-1998, Stephen Le Hunte