JavaScript DOM Reference
Realm Key:
? = Unsure
IE = Internet Explorer
NS = Netscape and Firefox using both the Mozilla and Gecko engines.
Op = Opera
Pr = Browsers that use the Presto engine such as Opera 10+
Rh = Rhino is Mozilla’s Java implementation of JavaScript.
SM = SpiderMonkey is Mozilla’s C implementation of JavaScript.
V8 = Google’s OpenSource JavaScript Engine used in Google Chrome and Chromium.
W3C = World Wide Web Consortium (the web standard)
WK = WebKit based browsers such as Safari and Chrome
Global Members
| Member |
Realm |
Description |
| innerWidth, innerHeight |
NS |
R/W property of the window’s content area’s width and height in pixels. Does not include toolbar, scrollbars, etc. |
| length |
? |
Returns the number of frames contained in the window. |
| outerWidth, outerHeight |
NS |
R/W property that specifies the total width and height in pixels. Including toolbar, scrollbars, etc. |
| pageXOffset, pageYOffset |
NS |
Returns an integer in pixels the current document has been scrolled from the upper left corner of the window. |
Dimension & Position
| Member |
Realm |
Description |
| window.innerWidth / window.innerHeight |
NS |
R/W property of the window’s content area width and height in pixels. Does not include toolbar, scrollbars, etc. |
| document.body.clientWidth / document.body.clientHeight |
IE |
^ |
| window.outerWidth / window.outerHeight |
NS |
R/W property that specifies the window’s total width and height in pixels. Including toolbar, scrollbars, etc. |
| window.pageXOffset / window.pageYOffset |
NS |
Returns an integer in pixels the current document has been scrolled from the upper left corner of the window. |
| window.scrollX / window.scrollY |
NS |
^ |
| document.body.scrollLeft / document.body.scrollTop |
IE |
^ |
| window.screenX / window.screenY |
NS |
R/W property that specifies the x and y coordinates of the window relative to the user’s monitor screen. |
| window.screenLeft / window.screenTop |
IE |
^ |
| window.resizeBy(dx, dy) |
? |
Resize the window by the specified amount in pixels. |
| window.resizeTo(dx, dy) |
? |
Resize the window to the specified pixel dimensions. |
| window.scrollBy(dx, dy) |
? |
Scrolls the window by the specified amount in pixels. |
| window.scrollByLines(lines) |
NS |
Scroll the document by the number of lines specified. |
| window.scrollByPages(pages) |
NS |
Scroll the document by the number of pages specified. |
| window.scrollTo(x, y) |
? |
Scrolls a window to the specified pixel value. |
| window.sizeToContent() |
NS |
Sizes the window to fit the content contained within. Useful for popups. |
Hardware
| Member |
Realm |
Description |
| window.screen |
? |
Reference to the screen object. |
| screen.availWidth / screen.availHeight |
? |
Returns the width or height of the screen minus taskbar, etc. @see window.innerWidth |
| screen.colorDepth |
? |
The bit depth of the color palette available for displaying images in bits per pixel. |
| screen.width / screen.height |
? |
The total screen width or height of the monitor, etc. |
Counting
| Member |
Realm |
Description |
| window.length |
? |
Returns the number of frames contained in the window. |
Events
| Member |
Realm |
Description |
| addEventListener(eventType, listener, useCapture) |
FF/W3C |
param eventType A string representing the event to bind, without the "on" prefix. For example, "click", "mousedown" etc.
param listener The object or function to fire when the event fires. The actual parameter entered should be a reference to the function or object (ie: “dothis” instead of “dothis()”.
param useCapture Boolean indicating whether to bind the event as it is propogating towards the target node, (event Capture), or as the event bubbles upwards from the target (event bubble). Set to true or false, respectively. |
| window.attachEvent(eventType, listener) | IE 5+ | ^
param eventType The event string should include the “on” prefix (ie: “onload”, “onclick” etc). |
| dispatchEvent(eventObject) |
FF/W3C |
Manually dispatch’s an event. |
| fireEvent(eventObject) |
IE |
^ |
| removeEventListener(eventType, listener, useCapture) |
FF/W3C |
@see addEventListener(eventType, listener, useCapture) |
| detachEvent(eventType, listener) |
IE |
^ |
Style
| Member |
Realm |
Description |
| window.getComputedStyle(elementRef, pseudoElementName) |
FF/W3C |
Returns a style object for the specified element. |
| document.defaultView.getComputedStyle(elementRef, pseudoElementName) |
FF/WK |
^ |
| elementRef.currentStyle |
IE |
^ |
| elementRef.style |
? |
Inline style object |
| document.styleSheets |
? |
Array of all stylesheet object either defined by <style> or <link> tag. |
JavaScript “Style”
DOM CSS
Getting global and external style sheet values in DHTML
Unique case "float"
elementRef.style.cssFloat (standard)
elementRef.style.styleFloat (IE quirks mode)
Clear styles using an empty string
elementRef.style.backgroundColor = "";