Home > Developer > JavaScript
[Note: The element name attribute on the page and the name referenced by JavaScript must be case-sensitive. Otherwise, an error message "the referenced element is null or not an object" is displayed.]
========================================================== ======================================
Object Property:
Document. Title // set the document title is equivalent to the <title> tag of HTML.
Document. bgcolor // set the background color of the page
Document. fgcolor // set the foreground color (text color)
Document. linkcolor // The link color that has not been clicked
Document. alinkcolor // the color of the activation Link (focus on this link)
Document. vlinkcolor // the color of the clicked Link
Document. url // set the URL attribute to open another webpage in the same window
Document. filecreateddate // file creation date, read-only attribute
Document. filemodifieddate // file modification date, read-only attribute
Document. filesize // file size, read-only attribute
Document. Cookie // set and read cookies
Document. charset // set the character set to simplified Chinese: gb2312
----------
Common Object methods:
Document. Write () // dynamically write content to the page
Document. createelement (TAG) // create an HTML Tag object
Document. getelementbyid (ID) // get the object with the specified id value
Document. getelementsbyname (name) // get the object with the specified name value
Document. Body. appendchild (otag)
========================================================== ======================================
Body-subject sub-Object
Document. Body // specify the beginning and end of the document body, which is equivalent to <body> </body>
Document. Body. bgcolor // set or obtain the background color behind the object
Document. Body. Link // the color of the link that has not been clicked
Document. Body. alink // the color of the activation Link (focus on this link)
Document. Body. vlink // the color of the clicked Link
Document. Body. Text // text color
Document. Body. innertext // set <body>... </Body> text
Document. Body. innerhtml // set <body>... </Body> Code
Document. Body. topmargin // top margin of the page
Document. Body. leftmargin // left margin of the page
Document. Body. rightmargin // right margin of the page
Document. Body. bottommargin // bottom margin of the page
Document. Body. Background // background image
Document. Body. appendchild (otag) // dynamically generate an HTML Object
----------
Common Object events:
Document. Body. onclick = "func ()" // The mouse pointer clicks the object to be triggered
Document. Body. onmouseover = "func ()" // triggered when the mouse pointer is moved to an object
Document. Body. onmouseout = "func ()" // triggered when the mouse pointer is removed from the object
========================================================== ======================================
Location-location sub-object:
Part after document. Location. Hash // #
Document. Location. host // domain name + port number
Document. Location. hostname // Domain Name
Document. Location. href // complete URL
Document. Location. pathname // directory
Document. Location. Port // port number
Document. Location. Protocol // network protocol (HTTP :)
Document. Location. Search //? Part after
----------
Common Object events:
Using eny. Location. Reload () // refresh the webpage
Document. Location. Reload (URL) // open a new webpage
Document. Location. Assign (URL) // open a new webpage
Document. Location. Replace (URL) // open a new webpage
========================================================== ======================================
Selection-Selection Sub-Object
Document. Selection
========================================================== ======================================
Images set (images in the page ):
----------
A) reference through a set
Document. Images // The label on the corresponding page
Document. Images. Length // Number of labels on the corresponding page
Document. Images [0] // 1st tags
Document. Images [I] // The I-1 label
----------
B) direct reference through the Nane attribute
Document. Images. oimage // document. Images. Name attribute
----------
C) reference the image's src attribute
Document. Images. oimage. SRC // document. Images. Name attribute. SRC
----------
D) create an image
VaR oimage
Oimage = new image ()
Document.images.oimage.src000000001.jpg"
At the same time, you can create a tag on the page to display it.
----------
Sample Code (dynamic image creation ):
<HTML>
<Script language = "JavaScript">
VaR oimage
Oimage = new image ()
Document.images.oimage.src000000001.jpg"
</SCRIPT>
</Html>
<HTML>
<Script language = "JavaScript">
Oimage = Document. caeateelement ("IMG ")
Oimage.src000000001.jpg"
Document. Body. appendchild (oimage)
</SCRIPT>
</Html>
========================================================== ======================================
Forms set (forms in the page ):
----------
A) reference through a set
Document. Forms // The <form> tag on the corresponding page
Document. Forms. Length // Number of <form> labels on the corresponding page
Document. Forms [0] // 1st <form> tags
Document. Forms [I] // The I-1 <form> label
Document. Forms [I]. Length // number of controls in the I-1 <form>
Document. Forms [I]. elements [J] // The I-1 control in the J-1 <form>
----------
B) direct reference through the label name attribute
<Form name = "myform"> <input name = "myctrl"> </form>
Document. myform. myctrl // document. form name. Control name
----------
C) Access Form attributes
Document. Forms [I]. Name // corresponds to the <form name> attribute
Document. Forms [I]. Action // corresponds to the <form action> attribute
Document. Forms [I]. Encoding // corresponds to the <form enctype> attribute
Document.formspolici2.16.tar get // corresponding to the <form target> attribute
Document. Forms [I]. appendchild (otag) // dynamically insert a control
----------
Sample Code (form ):
<HTML>
<! -Script related to the text control->
<Form name = "myform">
<Input type = "text" name = "otext">
<Input type = "password" name = "opswd">
<Form>
<Script language = "JavaScript">
// Obtain the value of the text password box
Document. Write (document. myform. otext. value)
Document. Write (document. myform. opswd. value)
</SCRIPT>
</Html>
----------
Sample Code (checkbox ):
<HTML>
<! -Checkbox and radio control->
<Form name = "myform">
<Input type = "checkbox" name = "Chk" value = "1"> 1
<Input type = "checkbox" name = "Chk" value = "2"> 2
</Form>
<Script language = "JavaScript">
Function fun (){
// Traverse the value of the checkbox control and determine whether to select
VaR Length
Length = Document. Forms [0]. Chk. Length
For (I = 0; I <length; I ++ ){
V = Document. Forms [0]. Chk [I]. Value
B = Document. Forms [0]. Chk [I]. Checked
If (B)
Alert (V = V + "selected ")
Else
Alert (V = V + "unselected ")
}
}
</SCRIPT>
<A href = # onclick = "Fun ()"> DDD </a>
</Html>
----------
Sample Code (select ):
<HTML>
<! -Script related to the select control->
<Form name = "myform">
<Select name = "oselect">
<Option value = "1"> 1 </option>
<Option value = "2"> 2 </option>
<Option value = "3"> 3 </option>
</SELECT>
</Form>
<Script language = "JavaScript">
// Traverse the option items of the Select Control
VaR Length
Length = Document. myform. oselect. Length
For (I = 0; I <length; I ++)
Document. Write (document. myform. oselect [I]. value)
</SCRIPT>
<Script language = "JavaScript">
// Traverse the option and determine whether an option is selected
For (I = 0; I <document. myform. oselect. length; I ++ ){
If (document. myform. oselect [I]. Selected! = True)
Document. Write (document. myform. oselect [I]. value)
Else
Document. Write ("<font color = Red>" + document. myform. oselect [I]. Value + "</font> ")
}
</SCRIPT>
<Script language = "JavaScript">
// Print the selected option based on selectedindex
// (0 to document. myform. oselect. Length-1)
I = Document. myform. oselect. selectedindex
Document. Write (document. myform. oselect [I]. value)
</SCRIPT>
<Script language = "JavaScript">
// Dynamically Add the option item of the Select Control
VaR ooption = Document. createelement ("option ");
Ooption. Text = "4 ″;
Ooption. value = "4 ″;
Document. myform. oselect. Add (ooption );
</SCRIPT>
<HTML>
========================================================== ======================================
Div set (layer in the page ):
<Div id = "odiv"> text </div>
Document. All. odiv // reference layer odiv
Document. All. odiv. style. Display = "" // set the layer to visible.
Document. All. odiv. style. Display = "NONE" // The layers are hidden.
Document. getelementid ("odiv") // reference an object through getelementid
Document. getelementid ("odiv"). Style = ""
Document. getelementid ("odiv"). Display = "NONE"
/* Document. All indicates the set of all objects in the document.
Only ie supports this attribute, so it is also used to determine the browser type */
----------
Four attributes of a layer object
Document. getelementbyid ("ID"). innertext // dynamic output text
Document. getelementbyid ("ID"). innerhtml // dynamically output html
Document. getelementbyid ("ID"). outertext // same as innertext
Document. getelementbyid ("ID"). outerhtml // same as innerhtml
----------
Sample Code:
<HTML>
<Script language = "JavaScript">
Function Change (){
Document. All. odiv. style. Display = "NONE"
}
</SCRIPT>
<Div id = "odiv" onclick = "Change ()"> text </div>
</Html>
<HTML>
<Script language = "JavaScript">
Function changetext (){
Document. getelementbyid ("odiv"). innertext = "newtext"
}
</SCRIPT>
<Div id = "odiv" onmouseover = "changetext ()"> text </div>
</Html>
Common event objects in Javascript
The javascript event object is used to describe JavaScript events. It mainly applies to various browser versions later than ie4 and nn4.
Event indicates the event status, such as the event element, keyboard status, mouse position, and mouse button status. Once an event occurs, an event object is generated. If you click a button, the corresponding event object is generated in the browser memory.
References to events by IE
In ie4 or later versions, the event object is accessed as the window property: window. envent. The referenced window part is optional. Therefore, the script treats the event object like a global reference:
Event. propertyname
Evnet object member table:
The following table lists the members of the event object. Click the label on the left to select the member type you want to view.
Object
Datatransfer provides access to the predefined clipboard format for use in the drag operation.
Set
Bookmarks returns a set of ActiveX Data Objects (ADO) bookmarks bound to the rows affected by the current event.
Boundelements returns a set of all elements bound to a given dataset.
Attribute
Abstract: Use the event object to obtain the abstract content of the project banner in the advanced Stream Redirector (ASX) file.
Altkey sets or obtains the status of the Alt key.
Altleft sets or obtains the status of the Left Alt key.
Banner uses the event object to obtain the banner content of the item in the advanced Stream Redirector (ASX) file.
Click to set or obtain the mouse button that the user presses.
Cancelbubble sets or obtains whether the current event needs to bubble up In the event handle.
Clientx sets or obtains the X coordinates of the mouse pointer position relative to the client area of the window. The client area does not include the control and scroll bar of the window.
Clienty sets or obtains the Y coordinate of the mouse pointer position relative to the client area of the window. The client area does not include the control and scroll bar of the window.
The retrieval of contentoverflow indicates whether the document contains additional content after processing the current layoutrect object.
Ctrlkey sets or obtains the status of the ctrl key.
Ctrlleft sets or obtains the status of the Left ctrl key.
Dataworks sets or obtains the data columns affected by the oncellchange event.
Fromelement sets or gets the object that is activated when an event occurs or the mouse is about to exit.
Set or obtain the Unicode key code associated with the buttons that cause the event.
Moreinfo obtains the moreinfo content of the project banner in the advanced Stream Redirector (ASX) file through the event object.
Obtain the position of the next page in the print template from nextpage.
Offsetx is used to set or obtain the X coordinate between the cursor position and the object that triggers the event.
Offsety is used to set or obtain the Y coordinate of the object relative to the trigger event.
Propertyname: set or obtain the property name that has been changed on the object.
Qualifier sets or gets the name of the data member provided by the data source object.
Reason sets or obtains the data transmission result of the data source object.
Recordset sets data source objects or obtains references to default datasets.
Repeat checks whether the onkeydown event is repeated.
Returnvalue is used to set or obtain the return value of an event.
Savetype obtains the clipboard type when oncontentsave is triggered.
Screenx is used to set or obtain the X coordinates of the cursor position relative to the user's screen.
Screeny is used to set or obtain the Y coordinate of the mouse pointer position relative to the user's screen.
Shiftkey sets or obtains the status of the shift key.
Shiftleft sets or obtains the status of the Left Shift key.
Srcelement sets or gets the object that triggers the event.
Srcfilter sets or gets the filter object that triggers the onfilterchange event.
Srcurn obtains the unified Resource Name (URN) for triggering event behavior ).
Set or retrieve the reference of the object to which the user wants to move the mouse pointer.
Type obtains the event name from the event object.
Wheeldelta sets or gets the scroll distance and direction of the scroll wheel button.
X sets or obtains the X-pixel coordinates of the cursor position relative to the parent document.
Y sets or obtains the Y pixel coordinate of the cursor position relative to the parent document.
Note
The event object is only available in the event -- this means that you can use this object in the event handle, but not in other code.
Although all event attributes can be accessed through all event objects, some attributes may be meaningless in some events. For example, the fromelement and toelement attributes make sense only when processing onmouseover and onmouseout events.
In Microsoft Visual BASIC script version (VBScript), you must access the event object through the window object.
This object is available in Microsoft Internet Explorer 4.0 scripts
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
