<HTML>
<HEAD> <TITLE> Measure for Measure </TITLE>
<SCRIPT>
<! --
Function one (){
Report. value = "The DIV above is relatively positioned in the BODY. the style object contains the information that was set in the inline style to position this object. the following are the values that wocould be reported for the varous position and dimension properties on the style object for the DIV: "+" \ n ";
Report. value = report. value + "mydiv. style. top (string) =" + foodiv. style. top + "\ n ";
Report. value = report. value + "mydiv. style. left (string) =" + foodiv. style. left + "\ n ";
Report. value = report. value + "mydiv. style. height (string) =" + foodiv. style. height + "\ n ";
Report. value = report. value + "mydiv. style. width (string) =" + foodiv. style. width + "\ n ";
Report. value = report. value + "mydiv. style. pixelTop (long) =" + foodiv. style. pixelTop + "\ n ";
Report. value = report. value + "mydiv. style. pixelLeft (long) =" + foodiv. style. pixelLeft + "\ n ";
Report. value = report. value + "mydiv. style. pixelHeight (long) =" + foodiv. style. pixelHeight + "\ n ";
Report. value = report. value + "mydiv. style. pixelWidth (long) =" + foodiv. style. pixelWidth + "\ n ";
Report. value = report. value + "mydiv. style. posTop (long) =" + foodiv. style. posTop + "\ n ";
Report. value = report. value + "mydiv. style. posLeft (long) =" + foodiv. style. posLeft + "\ n ";
Report. value = report. value + "mydiv. style. posHeight (long) =" + foodiv. style. posHeight + "\ n ";
Report. value = report. value + "mydiv. style. posWidth (long) =" + foodiv. style. posWidth + "\ n ";
}
Function two (){
Report. value = "Each object has a set of offset positions. The offset properties for the positioned darkBlue DIV above are: \ n ";
Report. value = report. value + "offsetLeft =" + foodiv. offsetLeft + "\ n ";
Report. value = report. value + "offsetTop =" + foodiv. offsetTop + "\ n ";
Report. value = report. value + "offsetHeight =" + foodiv. offsetHeight + "\ n ";
Report. value = report. value + "offsetWidth =" + foodiv. offsetWidth + "\ n ";
Report. value = report. value + "offsetLeft =" + document. body. offsetLeft + "\ n ";
Report. value = report. value + "offsetTop =" + document. body. offsetTop + "\ n ";
Report. value = report. value + "offsetHeight =" + document. body. offsetHeight + "\ n ";
Report. value = report. value + "offsetWidth =" + document. body. offsetWidth + "\ n ";
}
Function three (){
Report. value = "Scroll values for the darkBlue DIV object" + "\ n ";
Report. value = report. value + "scrollLeft =" + foodiv. scrollLeft + "\ n ";
Report. value = report. value + "scrollTop =" + foodiv. scrollTop + "\ n ";
Report. value = report. value + "scrollHeight =" + foodiv. scrollHeight + "\ n ";
Report. value = report. value + "scrollWidth =" + foodiv. scrollWidth + "\ n ";
Report. value = report. value + "Scroll values for the BODY" + "\ n ";
Report. value = report. value + "scrollLeft =" + document. body. scrollLeft + "\ n ";
Report. value = report. value + "scrollTop =" + document. body. scrollTop + "\ n ";
Report. value = report. value + "scrollHeight =" + document. body. scrollHeight + "\ n ";
Report. value = report. value + "scrollWidth =" + document. body. scrollWidth + "\ n ";
}
Function four (){
Report. value = "";
Report. value = report. value + "clientHeight for the BODY:" + document. body. clientHeight + "\ n ";
Report. value = report. value + "clientWidth for the BODY:" + document. body. clientWidth + "\ n ";
Report. value = report. value + "clientTop for the BODY:" + document. body. clientTop + "\ n ";
Report. value = report. value + "clientLeft for the BODY:" + document. body. clientLeft + "\ n ";
Report. value = report. value + "clientHeight for this TEXTAREA:" + report. clientHeight + "\ n ";
Report. value = report. value + "clientWidth for this TEXTAREA:" + report. clientWidth + "\ n ";
Report. value = report. value + "clientTop for this TEXTAREA:" + document. body. clientTop + "\ n ";
Report. value = report. value + "clientLeft for this TEXTAREA:" + document. body. clientLeft + "\ n ";
}
Function five (){
Report. value = "You clicked the mouse in the input button. The following reports the varous x and y values that are passed on the event object for this mouse click event \ n ";
Report. value = report. value + "window. event. x =" + window. event. x + "\ n ";
Report. value = report. value + "window. event. y =" + window. event. y + "\ n ";
Report. value = report. value + "window. event. offsetX =" + window. event. offsetX + "\ n ";
Report. value = report. value + "window. event. offsetY =" + window. event. offsetY + "\ n ";
Report. value = report. value + "window. event. screenX =" + window. event. screenX + "\ n ";
Report. value = report. value + "window. event. screenY =" + window. event. screenY + "\ n ";
Report. value = report. value + "window. event. clientX =" + window. event. clientX + "\ n ";
Report. value = report. value + "window. event. clientY =" + window. event. clientY + "\ n ";
}
-->
</Script>
<META HTTP-EQUIV = "Content-Type" CONTENT = "text/html; CHARSET = iso-8859-1">
<Meta name = "AUTHOR" CONTENT = "InetSDK">
<Meta name = "MS. LOCALE" CONTENT = "EN-US">
<Meta name = "ROBOTS" CONTENT = "noindex">
<! -- SAMPLE_STYLE_START -->
<Link rel = "stylesheet" HREF = "/workshop/basicSDKIE4.css" TYPE = "text/css">
<! -- SAMPLE_STYLE_END -->
</HEAD>
<! -- TOOLBAR_START -->
<! -- TOOLBAR_EXEMPT -->
<! -- TOOLBAR_END -->
<BODY style = "border: lightBlue solid 15; margin: 10px; padding: 10px; background-color: navy; font-family: arial "LINK =" # FFFFFF "VLINK =" #808080 "ALINK =" #000000 ">
<DIV id = "foodiv" style = "position: relative; top: 5; left: 5; height: 150; width: 200; overflow: scroll; margin: 20px; background-color: white; padding: 20px; border-color: lightBlue; border-width: 10; border-style: solid ">
DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool!
</DIV>
<Input type = button onclick = one () value = "Style Positions" style = "background-color: lightBlue; font-family: arial">
<Input type = button onclick = two () value = "Object Offset" style = "background-color: lightBlue; font-family: arial">
<Input type = button onclick = three () value = "Scroll Positions" style = "background-color: lightBlue; font-family: arial">
<Input type = button onclick = four () value = "Client Area" style = "background-color: lightBlue; font-family: arial">
<Input type = button onclick = five () value = "Event Object" style = "background-color: lightBlue; font-family: arial">
<BR>
<Center id = "title"> </center>
<TEXTAREA id = "report" rows = 10 cols = 50 wrap = physical style = "font-family: arial">
</TEXTAREA>
<! -- START_PAGE_FOOTER -->
<BR>
& Copy; <a class = "clsIncCpyRt" HREF = ".. /isapi/gomscom.asp@target%_2fmisc_2fcpyright.htm "TARGET =" _ top "> Microsoft Corporation. all rights reserved. terms of use </A>.
<! -- END_PAGE_FOOTER -->
</BODY>
</HTML>
Reply:
Q: What is the difference between event. X and event. clientX? A: event. when clientX returns an event, the mouse is relative to the X coordinate event of the client window. the same is true for X. However, if the property value of the event object is set to relativeevent. clientX remains unchanged and event. X returns the coordinate event object of the event object relative to the ontology. ICOOE 2000.3.31 timeout. Event attribute: the current state of the ALT key retrieved by altKey. The value true indicates that the current State is disabled. The value false indicates that the mouse key pressed by the button is not disabled. Possible values: 0 No keys 1 left click 2 right click 3 left Key 4 middle key 5 right click and center Key 6 right click and center key 7 press all keys cancelBubble to set or retrieve the current event whether to bubble the event handle: false enable bubble true cancel this event bubble clientX to retrieve the X coordinates of the mouse cursor related to the window customer area. The property is read-only and there is no default value. ClientY retrieves the Y coordinates of the mouse cursor related to the client area of the window. The attribute is read-only and there is no default value. CtrlKeyctrlKey: retrieves the current state of the CTRL key. The value true indicates that the current State is disabled. The value false indicates that the dataworkflow is not disabled. The aTransfer API provides a pre-defined clipboard format for the drag-and-drop operation. Element: retrieves the keyCode of the object pointer that exits during the on mouseover and on mouseout events, or retrieves the Unicode keyword code associated with the keyword that triggers the event. This attribute is used with onkeydown onkeyup onkeypress if it is not thrown event keywords, this value is 0offsetX to retrieve the horizontal coordinate offsetY of the mouse location related to the object that triggered the event to retrieve the vertical coordinate propertyName of the mouse location related to the object that triggered the event to retrieve the modified the feature name reason retrieves the possible values of the data transfer results of the data source object: 0 data transmission successful 1 data transmission failed 2 Data Transmission Error recordset retrieval reference of the default record set in the data source object this feature is read-only repeat to retrieve whether an event is repeated this attribute is only repeated in the onkeydown event returned truereturnvalues to set or retrieve the possible values returned from the event: true: the value in the event is returned. false: the default operation of the event on the source object is canceled. screenX is used to retrieve the horizontal position of the mouse related to the user screen. screenY is used to retrieve the vertical shiftKey of the mouse related to the user screen. the current status of the shiftKey may be set to true. false: The same Resource Name of the event triggered by the onfilterchange event retrieval of the filter object srcUm that does not close the srcElement retrieval trigger event. the following two conditions are true, otherwise, this feature is set to null1. the behavior is appended to the trigger event element. 2. the behavior defined in the previous project symbol has specified an URN identifier and the trigger event toElement to retrieve the event name in the event object as the type object that is moved as the result of the on mouseover or on mouseout event. x: an integer relative to the horizontal coordinate of the parent element. y: an integer relative to the vertical coordinate of the parent element.X: set or obtain the position of the outer boundary of the parent element of the mouse relative to the target event on the x coordinate.
ClientX: The x coordinate position of the client region, excluding the scroll bar, that is, the body area.
Offsetx: set or obtain the position of the inner boundary of the parent element of the mouse relative to the target event on the x coordinate.
ScreenX: relative to the user screen.
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
