source: www/manuals/HTML_Reference/dynamic_html/dhtmlp.htm@ 1

Last change on this file since 1 was 1, checked in by george, 17 years ago

Prvotní import všeho
File size: 21.2 KB
Line 
1<HTML>
2<!-- This file is part of the HTML Reference Library ('HTMLib') -->
3<!-- It should not be used outside of the HTMLib package -->
4<!-- The HTMLib is © 1995-1998 Stephen Le Hunte -->
5<!-- htmlib@htmlib.demon.co.uk -->
6<HEAD>
7<LINK REL="stylesheet" HREF="../style.css" TYPE="text/css">
8<TITLE>Dynamic HTML standard properties</TITLE>
9</HEAD>
10<BODY TOPMARGIN="0" BGCOLOR="#FFFFE0" TEXT="#000000">
11
12<CENTER>
13<SPAN CLASS="NSRtitle">Standard DHTML Properties</SPAN>
14</CENTER>
15
16
17
18<!-- ********************************************************************************* -->
19<!-- ****************************** Standard Properties ****************************** -->
20<!-- ********************************************************************************* -->
21
22<P><A NAME="StandardProperties"><STRONG>Standard Properties</STRONG></A><BR>
23<STRONG>Internet Explorer</STRONG> 4.0's scripting object model is all-encompassing, to the point that unknown attributes for known elements are available through scripting. I.e. for any element that <STRONG>Internet Explorer</STRONG> 4.0 supports, any attributes of your choice can be added to the element and their values are available through scripting. Inquisitive readers will have noticed that the title documents in the HTMLib use <CODE>XSIZE</CODE> and <CODE>YSIZE</CODE> attributes in their links. These are available to the rest of the HTMLib for scripting, enabling the popups to work. Detailed below are the standard Dynamic HTML properties supported for practically <EM>every</EM> element in <STRONG>Internet Explorer</STRONG> 4.0
24
25<P><A NAME="PropclassName"><SPAN CLASS="attr">className</SPAN></A><BR>
26The <CODE>className</CODE> property can be used to determine, or set, which particular style sheet class the referenced element uses, from the documents style sheet settings, i.e. whatever the <CODE>CLASS</CODE> attribute is set to. For example, the following <A HREF="../Anchors/anchor.htm" TITLE="View the &lt;A&gt; topic"><CODE>&lt;A&gt;</CODE></A> element utilises the style sheet class <CODE>"warning"</CODE>
27
28<SPAN CLASS="egcode">
29<BLOCKQUOTE>
30<CODE>&lt;A HREF="warning.htm" <STRONG>CLASS="warning"</STRONG>&gt;Read the warning first&lt;/A&gt;
31</CODE>
32</BLOCKQUOTE>
33</SPAN>
34
35<P>thus, its <CODE>className</CODE> property would be <CODE>warning</CODE>.
36<P>Dynamically setting an elements class to one that doesn't exist causes the element to use the browsers default settings for the element, or the default style sheet setting for the element in any style sheet declarations attached to the document.
37
38<P><A NAME="PropdataFld"><SPAN CLASS="attr">dataFld</SPAN></A><BR>
39The <CODE>dataFld</CODE> property directly reflects the value of the elements <CODE>DATAFLD</CODE> property, for those elements that support <A HREF="ddata.htm" TITLE="View the Data Binding topic">Data Binding</A>. The <CODE>DATAFLD</CODE> attribute is used to set the column name that the element will take data from - the column name being a valid column in the Data source object referenced by the <CODE>DATASRC</CODE> attribute/property (see below). For more information, see the <A HREF="ddata.htm" TITLE="View the Data Binding topic">Data Binding</A> topic.
40
41<P><A NAME="PropdataFormatAs"><SPAN CLASS="attr">dataFormatAs</SPAN></A><BR>
42The <CODE>dataFormatAs</CODE> property directly reflects the <CODE>DATAFORMATAS</CODE> attribute for those elements that supported HTML formatted <A HREF="ddata.htm" TITLE="View the Data Binding topic">Data Binding</A>. The <CODE>DATAFORMATAS</CODE> attribute can have values of "Text" or "HTML" and specifies whether the data provided by the Data Source object should be treated literally ("Text"), or parsed ("HTML"). Note that if the data contains HTML formatting, but the <CODE>DATAFORMATAS="HTML"</CODE> attribute is not set, it will be treated as plain text.
43
44<P><A NAME="PropdataSrc"><SPAN CLASS="attr">dataSrc</SPAN></A><BR>
45The <CODE>dataSrc</CODE> property directly reflects the <CODE>DATASRC</CODE> attribute for elements that support <A HREF="ddata.htm" TITLE="View the Data Binding topic">Data Binding</A>. The <CODE>DATASRC</CODE> attribute referenced the Data Source that has been bound to elements in the document using the <CODE><A HREF="../Media_Embedding/object.htm" TITLE="View the &lt;OBJECT&gt; topi">&lt;OBJECT&gt;</A></CODE> element. For more information, see the <A HREF="ddata.htm" TITLE="View the Data Binding topic">Data Binding</A> topic.
46
47<P><A NAME="Propdocument"><SPAN CLASS="attr">document</SPAN></A><BR>
48The <CODE>document</CODE> property contains a reference to the <A HREF="../Scripting_Reference/doco.htm" TITLE="View the Document Object topic">Document Object</A> in which the element is contained. Through it, various properties of the Document Object can be obtained.
49
50<P><A NAME="Propfilters"><SPAN CLASS="attr">filters</SPAN></A><BR>
51The <CODE>filters</CODE> collection property represents a <A HREF="../Scripting_Reference/filtcol.htm" TITLE="View the Filters collection topic">Filters collection</A> applied to the referenced element. For example:
52
53<SPAN CLASS="egcode">
54<BLOCKQUOTE>
55<CODE>&lt;IMG ID="logo" SRC="images/logo2.gif" WIDTH="384" HEIGHT="154" STYLE="filter:revealTrans(Duration=3.0, Transition=12);VISIBILITY:hidden" ALT="HTMLib logo" ALIGN="center"&gt;<BR>
56. . .<BR>
57 call logo.filters.item(0).Apply()<BR>
58 logo.style.visibility=""<BR>
59 call logo.filters.item(0).Play()
60</CODE>
61</BLOCKQUOTE>
62</SPAN>
63
64<P>The image has a Transition filter applied to it and is later referenced in a script by calling the first <CODE>item</CODE> of the elements filters collection.
65
66
67<P><A NAME="Propid"><SPAN CLASS="attr">id</SPAN></A><BR>
68The <CODE>id</CODE> property reflects the referenced element's <CODE>ID</CODE> property (if set), which contains a unique identifier for the element, within the document content.
69
70<P><A NAME="PropinnerHTML"><SPAN CLASS="attr">innerHTML</SPAN></A><BR>
71The <CODE>innerHTML</CODE> property reflects the content contained by the referenced element, including all the HTML elements. For example, consider the following <A HREF="../Block_Level_Elements/address.htm" TITLE="View the &lt;ADDRESS&gt; topic"><CODE>&lt;ADDRESS&gt;</CODE></A> element:
72
73<SPAN CLASS="egcode">
74<BLOCKQUOTE>
75<CODE>&lt;ADDRESS ID="Address1"&gt;<BR>
76Stephen Le Hunte,&lt;BR&gt;<BR>
771, HTMLib Way,&lt;BR&gt;<BR>
78Swansea,&lt;BR&gt;<BR>
79U.K.<BR>
80&lt;/ADDRESS&gt;
81</CODE>
82</BLOCKQUOTE>
83</SPAN>
84
85<P>The address' <CODE>innerHTML</CODE> property (obtained by referencing it via its <CODE>ID</CODE> property) would be:
86
87<SPAN CLASS="egcode">
88<BLOCKQUOTE>
89<CODE>Stephen Le Hunte,&lt;BR&gt;1, HTMLib Way,&lt;BR&gt;Swansea,&lt;BR&gt;U.K.&lt;BR&gt;
90</CODE>
91</BLOCKQUOTE>
92</SPAN>
93
94<P>The <CODE>innerHTML</CODE> property has read-write permissions, meaning that HTML content can be 'written' into any element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The new HTML content would adopt whatever stylings (and <CODE>ID</CODE>) were applied to the referenced element, before the new content was supplied. Note that inappropriate nesting cannot occur when using the <CODE>innerHTML</CODE> property. For example, a <CODE><A HREF="../Text_Formatting/but.htm" TITLE="View the &lt;BUTTON7gt; topic">&lt;BUTTON&gt;</A></CODE> cannot contain another <CODE>&lt;BUTTON&gt;</CODE> element, so trying to apply some <CODE>&lt;BUTTON&gt;</CODE> HTML to the <CODE>innerHTML</CODE> property of another <CODE>&lt;BUTTON&gt;</CODE> element will fail. Also, note that adding elements through an elements <CODE>innerHTML</CODE> property changes the documents <A HREF="../Scripting_Reference/allcol.htm" TITLE="View the All collection topic">All collection</A> and any associated <CODE>sourceIndex</CODE> properties.
95
96<P><A NAME="PropinnerText"><SPAN CLASS="attr">innerText</SPAN></A><BR>
97Like the <CODE>innerHTML</CODE> property described above, the <CODE>innerText</CODE> property reflects the content of any referenced element, but without the actual HTML elements included in the content. For example, the <CODE>innerText</CODE> property of the above example would be:
98
99<SPAN CLASS="egcode">
100<BLOCKQUOTE>
101<CODE>Stephen Le Hunte,<BR>
1021, HTMLib Way,<BR>
103Swansea,<BR>
104U.K.
105</CODE>
106</BLOCKQUOTE>
107</SPAN>
108
109<P>Note that the <CODE>&lt;BR&gt;</CODE> element's are honoured. If the contents of the <CODE>innerText</CODE> property were displayed using the alert method (see the <A HREF="../Scripting_Reference/windo.htm" TITLE="View the Window Object topic">Window Object</A> for details), then the displayed message would include such white space (Paragraph elements (<CODE>&lt;P&gt;</CODE>) and horizontal rules(<CODE>&lt;HR&gt;</CODE>) are other elements that are represented in the <CODE>innerText</CODE> property)
110<P>The <CODE>innerText</CODE> property has read-write permissions, meaning that text content can be 'written' into any element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The new text written into the element would adopt whatever stylings (and <CODE>ID</CODE>) were applied to the element beforehand.
111
112
113<P><A NAME="PropisTextEdit"><SPAN CLASS="attr">isTextEdit</SPAN></A><BR>
114The <CODE>isTextEdit</CODE> property has a boolean value, reflecting whether or not the referenced element is one that accepts text editing. Currently, this is just <A HREF="../Text_Formatting/but.htm" TITLE="View the &lt;BUTTON&gt; topic"><CODE>&lt;BUTTON&gt;</CODE></A>, <A HREF="../Forms/text.htm" TITLE="View the &lt;TEXTAREA&gt; topic"><CODE>&lt;TEXTAREA&gt;</CODE></A> and <A HREF="../Forms/input.htm" TITLE="View the &lt;INPUT&gt; topic"><CODE>&lt;INPUT TYPE="text"&gt;</CODE></A> elements. If the referenced element is such an element, then the <CODE>isTextEdit</CODE> property value would be <CODE>true</CODE>, otherwise it's <CODE>false</CODE>. The <CODE>isTextEdit</CODE> property is most useful when trying to determine whether the referenced object can have a <A HREF="../Scripting_Reference/trange.htm" TITLE="View the Text Range Object">TextRange Object</A> created from its contents. Those elements that return true can, those that return false can't.
115
116<P><A NAME="Proplang"><SPAN CLASS="attr">lang</SPAN></A><BR>
117The <CODE>lang</CODE> property directly reflects the referenced elements <CODE>LANG</CODE> attribute value (if set). <CODE>LANG</CODE> is a standard HTML attribute supported by most elements for describing the language of the elements content. For more information, see the <A HREF="../Document_Localisation/ov.htm" TITLE="View the Document Localisation topic">Document Localisation</A> topic.
118
119<P><A NAME="Proplanguage"><SPAN CLASS="attr">language</SPAN></A><BR>
120The <CODE>language</CODE> property reflects the referenced elements <CODE>LANGUAGE</CODE> attribute value (if set). As most elements support direct in-line scripting (i.e. using scripting event handlers within the element), the <CODE>LANGUAGE</CODE> property is used to explicitly tell the browser which particular scripting language the event handler information is written for. <STRONG>Internet Explorer</STRONG> defaults to using JScript (the Microsoft JavaScript implementation) to attempt to execute in-line script functions.
121
122<P><A NAME="PropoffsetHeight"><SPAN CLASS="attr">offsetHeight</SPAN></A><BR>
123The <CODE>offsetHeight</CODE> property is read-only and returns a value specifying the height of the referenced element (in pixels), relative to its parent containing element.
124
125<P><A NAME="PropoffsetLeft"><SPAN CLASS="attr">offsetLeft</SPAN></A><BR>
126The <CODE>offsetLeft</CODE> property is also read-only and returns a pixel value for the referenced elements left offset, relative to its parent containing objects left-most position.
127
128<P><A NAME="PropoffsetParent"><SPAN CLASS="attr">offsetParent</SPAN></A><BR>
129The <CODE>offsetParent</CODE> element is read-only and returns a reference to the current referenced elements parent containing element object. This is the element whose positions are used to determine the relative <CODE>offset*</CODE> properties for any referenced element.
130
131<P><A NAME="PropoffsetTop"><SPAN CLASS="attr">offsetTop</SPAN></A><BR>
132The <CODE>offsetTop</CODE> property is also read-only and returns a pixel value for the referenced elements top offset, relative to its parent containing objects top-most position.
133
134<P><A NAME="PropoffsetWidth"><SPAN CLASS="attr">offsetWidth</SPAN></A><BR>
135The <CODE>offsetWidth</CODE> property is read-only and returns a value specifying the width of the referenced element (in pixels), relative to its parent containing element.
136
137<P><A NAME="PropouterHTML"><SPAN CLASS="attr">outerHTML</SPAN></A><BR>
138The <CODE>outerHTML</CODE> property is much like the <A HREF="#PropinnerHTML" TITLE="Scroll to the innerHTML property section"><CODE>innerHTML</CODE></A> property, except that reflects the HTML of the whole element, including any content. For example:
139
140<SPAN CLASS="egcode">
141<BLOCKQUOTE>
142<CODE>&lt;A HREF="#footnote"&gt;&lt;STRONG&gt;Make sure&lt;/STRONG&gt; to read the footnotes&lt;/A&gt;
143</CODE>
144</BLOCKQUOTE>
145</SPAN>
146
147<P>would have an <CODE>innerHTML</CODE> property of <CODE>&lt;STRONG&gt;Make sure&lt;/STRONG&gt; to read the footnotes</CODE>, while its <CODE>outerHTML</CODE> property would be:
148
149<SPAN CLASS="egcode">
150<BLOCKQUOTE>
151<CODE>&lt;A HREF="#footnote"&gt;&lt;STRONG&gt;Make sure&lt;/STRONG&gt; to read the footnotes&lt;/A&gt;
152</CODE>
153</BLOCKQUOTE>
154</SPAN>
155
156<P>I.e., exactly what the element is.
157<P>The <CODE>outerHTML</CODE> property has read-write permissions, meaning that entire HTML elements can be changed to a different element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The only styling (and <CODE>ID</CODE>) information applied to the new element would be whatever is specified in the new contents of the <CODE>outerHTML</CODE> property. Note that changing an element through its <CODE>outerHTML</CODE> property changes the documents <A HREF="../Scripting_Reference/allcol.htm" TITLE="View the All collection topic">All collection</A> and the referenced elements <CODE>sourceIndex</CODE> property.
158
159<P><A NAME="PropouterText"><SPAN CLASS="attr">outerText</SPAN></A><BR>
160Like the <A HREF="#PropinnerText"><CODE>innerText</CODE></A> property described above, the <CODE>outerText</CODE> property reflects text contained in the referenced element. Any text outside the element, is not considered part of the element's content, so the values of the two properties are identical. However, as the <CODE>outerText</CODE> property has read-write permissions, entire HTML elements can be replaced with straight text through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content.
161
162<P><A NAME="PropparentElement"><SPAN CLASS="attr">parentElement</SPAN></A><BR>
163The <CODE>parentElement</CODE> property can be used to obtain a reference to the element immediately preceding the element specified, whose properties and/or methods can be manipulated and/or invoked respectively. Note that the <CODE>parentElement</CODE> property is read-only and works on a 'content-model' basis. This means that the <CODE>parentElement</CODE> property of elements will be their containing <A HREF="../Block_Level_Elements/ov.htm" TITLE="View the Block Formatting Elements overview">Block Formatting Element</A>, with the <CODE>parentElement</CODE> property of BLock formatting elements being the <A HREF="../Document_Structure_Elements/body.htm" TITLE="View the &lt;BODY&gt; topic"><CODE>&lt;BODY&gt;</CODE></A> element, unless they're contained in another Block-level element.
164
165<P><A NAME="PropparentTextEdit"><SPAN CLASS="attr">parentTextEdit</SPAN></A><BR>
166If the <CODE>isTextEdit</CODE> property returns false, indicating that the referenced element does not support <A HREF="../Scripting_Reference/trange.htm" TITLE="View the TextRange object">TextRange object</A> creation, then the <CODE>parentTextEdit</CODE> can be used to determine the next element object up in the element hierarchy that does support text editing (and the creation of TextRange objects) and would completely enclose the referenced element in a TextRange object.
167
168<P><A NAME="ProprecordNumber"><SPAN CLASS="attr">recordNumber</SPAN></A><BR>
169When a data bound repeating table is set up (i.e. one that shows only a certain amount of records from a Data Source at any one time), the <CODE>recordNumber</CODE> property reflects the current record number, from the data source that the referenced object is displaying. For more information on Data Binding, see the <A HREF="ddata.htm" TITLE="View the Data Binding topic">Data Binding</A> topic.
170
171<P><A NAME="PropsourceIndex"><SPAN CLASS="attr">sourceIndex</SPAN></A><BR>
172For each document, <STRONG>Internet Explorer</STRONG> creates an indexed array of all the opening HTML elements. The <CODE>sourceIndex</CODE> property reflects the referenced elements position in this array. Essentially, the value returned by the <CODE>sourceIndex</CODE> property is identical to the elements index in the <A HREF="../Scripting_Reference/allcol.htm" TITLE="View the All collection topic">All collection</A>. For an example, consider the following document :
173
174<SPAN CLASS="egcode">
175<BLOCKQUOTE>
176<CODE>
177&lt;HTML&gt;<BR>
178&lt;HEAD&gt;&lt;TITLE&gt;Document Title&lt;/TITLE&gt;<BR>
179&lt;/HEAD&gt;<BR>
180&lt;BODY&gt;<BR>
181&lt;P&gt;Here's some text, &lt;A HREF="other_page.html"&gt;Here's a link&lt;/A&gt;<BR>
182&lt;/BODY&gt;<BR>
183&lt;/HTML&gt;
184</CODE>
185</BLOCKQUOTE>
186</SPAN>
187
188<P>The anchors <CODE>sourceIndex</CODE> property would be 5. The <A HREF="../Document_Structure_Elements/html.htm" TITLE="View the &lt;HTML&gt; topic"><CODE>&lt;HTML&gt;</CODE></A> element would be 0, the <A HREF="../Document_Structure_Elements/head.htm" TITLE="View the &lt;HEAD&gt; topic"><CODE>&lt;HEAD&gt;</CODE></A> element 1, the <A HREF="../Document_Structure_Elements/title.htm" TITLE="View the &lt;TITLE&gt; topic"><CODE>&lt;TITLE&gt;</CODE></A> element 2 etc.
189
190<P><EM><STRONG>NOTE :</STRONG></EM> <STRONG>Internet Explorer</STRONG> 4.0 inserts <A HREF="../Document_Structure_Elements/html.htm" TITLE="View the &lt;HTML&gt; topic"><CODE>&lt;HTML&gt;</CODE></A>, <A HREF="../Document_Structure_Elements/title.htm" TITLE="View the &lt;TITLE&gt; topic"><CODE>&lt;TITLE&gt;</CODE></A>, <A HREF="../Document_Structure_Elements/head.htm" TITLE="View the &lt;HEAD&gt; topic"><CODE>&lt;HEAD&gt;</CODE></A> and <A HREF="../Document_Structure_Elements/body.htm" TITLE="View the &lt;BODY&gt; topic"><CODE>&lt;BODY&gt;</CODE></A> into the <CODE>sourceIndex</CODE> array and <A HREF="../Scripting_Reference/allcol.htm" TITLE="View the All collection topic">All collection</A> regardless of whether they existed in the document or not. Also, <A HREF="../Tables/tbody.htm" TITLE="View the &lt;TBODY&gt; topic"><CODE>&lt;TBODY&gt;</CODE></A> elements are inserted after any <A HREF="../Tables/table.htm" TITLE="View the &lt;TABLE&gt; topic"><CODE>&lt;TABLE&gt;</CODE></A> elements (if no <CODE>&lt;TBODY&gt;</CODE> element is set). So, if the above document were modified to :
191
192<SPAN CLASS="egcode">
193<BLOCKQUOTE>
194<CODE>
195. . .<BR>
196&lt;P&gt;<BR>
197<STRONG>&lt;TABLE&gt;</STRONG><BR>
198<STRONG>&lt;TR&gt;&lt;TD&gt;</STRONG><BR>
199Here's some text, &lt;A HREF="other_page.html"&gt;Here's a link&lt;/A&gt;<BR>
200&lt;/TD&gt;&lt;/TR&gt;<BR>
201&lt;/TABLE&gt;<BR>
202. . .
203</CODE>
204</BLOCKQUOTE>
205</SPAN>
206
207<P>then the anchors <CODE>sourceIndex</CODE> property would be 9 (instead of 8 as expected). The <CODE>sourceIndex</CODE> property is read-only.
208
209<P><A NAME="Propstyle"><SPAN CLASS="attr">style</SPAN></A><BR>
210The <CODE>style</CODE> property reflects any stylings that the referenced element may have. <STRONG>Internet Explorer</STRONG> 4.0 only reflects in-line stylings, included using the <CODE>STYLE</CODE> attribute in the opening element and not those attached to an element via a style sheet (within the document, or external).
211<BR>
212The <CODE>style</CODE> property actually returns a reference to a <A HREF="../Scripting_Reference/styleo.htm" TITLE="View the Style Object topic">Style object</A> for the referenced element, whose properties and methods can then be manipulated or invoked. See the Style Object topic for more details.
213
214<P><A NAME="ProptagName"><SPAN CLASS="attr">tagName</SPAN></A><BR>
215The <CODE>tagName</CODE> property reflects the actual element name. For example, for anchors, their <CODE>tagName</CODE> property is <CODE>A</CODE>, <CODE>&lt;TABLE&gt;</CODE> returns <CODE>TABLE</CODE> etc. The <CODE>tagName</CODE> property is read-only and would prove useful for determining a particular element through its <CODE>sourceIndex</CODE> property, or its position in the <A HREF="../Scripting_Reference/allcol.htm" TITLE="View the All collection topic">All collection</A>.
216
217<P><A NAME="Proptitle"><SPAN CLASS="attr">title</SPAN></A><BR>
218The <CODE>title</CODE> attribute reflects the referenced elements <CODE>TITLE</CODE> attribute setting (if set). <CODE>TITLE</CODE> attribute values are generally used (in <STRONG>Internet Explorer 4.0</STRONG>) as ToolTips, displayed when the mouse passes over the particular element. It is possible to dynamically change the <CODE>title</CODE> property through scripting.
219
220
221
222<P ALIGN="right" CLASS="copyright">© 1995-1998, Stephen Le Hunte</P>
223</BODY>
224</HTML>
Note: See TracBrowser for help on using the repository browser.