document.documentMode; - https://www.w3schools.com/jsref/prop_doc_documentmode.asp
(document.compatMode==='CSS1Compat'?'Standards':'Quirks')
http://www.sitepoint.com/resources-javascript-dom-compatibility-tables
http://help.dottoro.com/ljsdaoxj.php
http://help.dottoro.com/ljbixkkn.php
https://www.sitepoint.com/add-remove-css-class-vanilla-js
CSV
Working with the select element
Context menu
Copy and paste
Text selection
Printing
Cookies
Position caret
The screen object
The window object
The navigator object
The form object
The location object
The history object
The image object
Plugins
Attributes
Frames
Popup
Form
Form validation
How to use JavaScript to trigger fullscreen mode, and how to detect fullscreen mode?
How to put the caret or cursor at a certain position within an input or textarea?
How to detect if the user is using zooming?
Find matching elements
The document object
document.write
insertAdjacentHTML
Element's position?
Scrollbars and scroll position
Event Handling
How to debug event handler?
Drag and drop
document.documentElement versus document.body
A list of DOM properties and methods
Miscellaneous
DOM / Local storage
Geolocation
Server sent events
Console - Using console.log and console.dir
Dynamic script loading
autocomplete
How to close window without warning?
How to detect the close button?
How to process a large amount of work?
el.offsetHeight / el.offsetWidth;
window.pageXOffset / window.pageYOffset
window.innerWidth / window.innerHeight
window.outerWidth / window.outerHeight
el.getBoundingClientRect();What is the purpose of window.innerWidth / window.innerHeight?
This represent the width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar. See https://developer.mozilla.org/en-US/docs/Web/API/Window.innerWidth
Get the window's height and width: (NOT including toolbars/scrollbars). The innerWidth property returns the inner width of a window's content area. The innerHeight property returns the inner height of a window's content area. These properties are read-only. Use the outerWidth and outerHeight properties to get the width/height with toolbars/scrollbars. See http://www.w3schools.com/jsref/prop_win_innerheight.asp
What is the purpose of clientHeight / clientWidth?
The clientWidth property is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin. See https://developer.mozilla.org/en-US/docs/Web/API/Element.clientWidth
Returns the width of the visible area for an object, in pixels. The value includes the padding, but does not include the scrollBar, border, and the margin. The offsetWidth property is similar to the clientWidth property, but it returns the width including the padding, scrollBar and the border. If you need the total width of an element's contents, use the scrollWidth property. It returns the width of the contents with the padding, but without the scrollBar, border and the margin. In Opera, the scrollbar is also included. Another way to get the width of an object is to use the getBoundingClientRect method. It returns the bounding rectangle of the object without the margin. You can set the width of an element with the width, pixelWidth and posWidth style properties. In that case, the value of the width contains the width of the visible contents with the vertical scrollbar, but without the padding, border and the margin. You can get the value of the width style property in different units with these properties, not the rendered width of the element. Note that the clientWidth property is special for the html element. It returns the width of the browser's client area without the vertical scrollbar for any doctype. If no doctype is specified, the clientWidth property of the html element contains different values in the browsers. See http://help.dottoro.com/ljmclkbi.php
The Element.clientHeight read-only property returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin. clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present). See https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight
Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, but it does not include the scrollBar, border, and the margin. The offsetHeight property is similar to the clientHeight property, but it returns the height including the padding, scrollBar and the border. If you need the total height of an element's contents, use the scrollHeight property. It returns the height of the contents with the padding, but without the scrollBar, border and the margin. In Opera, the scrollbar is also included. Another way to get the height of an object is to use the getBoundingClientRect method. It returns the bounding rectangle of the object without the margin. See http://help.dottoro.com/ljcadejj.php
Retrieves the height of the object including padding, but not including margin, border, or scroll bar. This example shows how the clientHeight property and the offsetHeight property measure document height differently. The height of the div is set to 100, and this is the value retrieved by the offsetHeight property, not the clientHeight property. See http://msdn.microsoft.com/en-us/library/ie/ms533563%28v=vs.85%29.aspx
What is the purpose of offsetHeight / offsetWidth?
The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, in pixels, as an integer. Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height. For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
Retrieves the height of the object relative to the layout or coordinate parent, as specified by the offsetParent property. You can determine the location, width, and height of an object by using a combination of the offsetLeft, offsetTop, offsetHeight, and offsetWidth properties. These numeric properties specify the physical coordinates and dimensions of the object relative to the object's offset parent. See http://msdn.microsoft.com/en-us/library/ie/ms534199%28v=vs.85%29.aspx
What is the purpose of scrollHeight?
The read-only attribute (scrollHeight) is a measurement of the height of an element's content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin. What about borders? See https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight
The scrollHeight property returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin. See http://www.w3schools.com/jsref/prop_element_scrollheight.asp
The scrollWidth and scrollHeight properties return the entire height and width of an element, including the height and width that is not viewable (because of overflow). See http://www.w3schools.com/jsref/prop_element_scrollheight.asp
Returns the total height of an element's contents, in pixels. The value contains the height with the padding, but does not include the scrollBar, border, and the margin. If the horizontal scrollbar is displayed, then the scrollHeight property returns the height of the contents with the height of the horizontal scrollbar in Opera. If you need the height of the visible area for an object, use the clientHeight or offsetHeight property. Another way to get the height of an object is to use the getBoundingClientRect method. It returns the bounding rectangle of the object without the margin. See http://help.dottoro.com/ljbixkkn.php
What is the difference between clientWidth and declared width?
The clientWidth property is the inner width of an element in pixels. **It includes padding but not the vertical scrollbar (if present, if rendered), border or margin. The value includes the padding, but does not include the scrollBar, border, and the margin. The offsetWidth property is similar to the clientWidth property, but it returns the width including the padding, scrollBar and the border. If you need the total width of an element's contents, use the scrollWidth property. It returns the width of the contents with the padding, but without the scrollbar, border and the margin. In Opera, the scrollbar is also included. Another way to get the width of an object is to use the getBoundingClientRect method. It returns the bounding rectangle of the object without the margin. See http://help.dottoro.com/ljmclkbi.php
The declared width includes padding, and borders, but does not include margin. The clientWidth property includes padding but not the vertical scrollbar (if present, if rendered), border or margin. So the difference is regarding the borders, and whether the scrollbar is present or not.
What is the difference between document.documentElement.clientWidth and window.innerWidth?
Aren’t the dimensions of the viewport width also given by window.innerWidth / window.innerHeight? Well, yes and no. There’s a formal difference between the two property pairs: document.documentElement.clientWidth and document.documentElement.clientHeight doesn’t include the scrollbar, while window.innerWidth / window.innerHeight does. The fact that we have two property pairs is a holdover from the Browser Wars. Back then Netscape only supported window.innerWidth / window.innerHeight and IE only document.documentElement.clientWidth and document.documentElement.clientHeight. Since then all other browsers started to support clientWidth / clientHeight, but IE didn’t pick up window.innerWidth / window.innerHeight.
How to determine the height and width of the window?
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);function getActualWidth() {
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}window.innerWidth and window.innerHeight are supported by all modern browsers except for IE8 and below.
document.body.clientHeight
How can we determine the size of the browser window or viewport?
We can find the size of the browser window using:
window.innerWidth
window.innerHeight
document.documentElement.clientWidth
document.documentElement.clientHeightThe inner width of the window is measured in CSS pixels. You need to know how much of your layout you can squeeze into the browser window, and that amount decreases as the user zooms in. So if the user zooms in you get less available space in the window, and window.innerWidth / window.innerHeight reflect that by decreasing. (The exception here is Opera, where window.innerWidth / window.innerHeight do not decrease when the user zooms in: they’re measured in device pixels.)
The measured widths and heights include the scrollbars. They, too, are considered part of the inner window. (This is mostly for historical reasons.)
So document.documentElement.clientWidth and -Height always gives the viewport dimensions, regardless of the dimensions of the <html> element.
But aren’t the dimensions of the viewport width also given by window.innerWidth / window.innerHeight? Well, yes and no. There’s a formal difference between the two property pairs: document.documentElement.clientWidth and document.documentElement.clientHeight doesn’t include the scrollbar, while window.innerWidth / window.innerHeight does. The fact that we have two property pairs is a holdover from the Browser Wars. Back then Netscape only supported window.innerWidth / window.innerHeight and IE only document.documentElement.clientWidth and document.documentElement.clientHeight. Since then all other browsers started to support clientWidth / clientHeight, but IE didn’t pick up window.innerWidth / window.innerHeight.
So clientWidth / clientHeight gives the viewport dimensions in all cases. To find the dimensions of the <html> element itself, we can use document.documentElement.offsetWidth and document.documentElement.offsetHeight. These properties truly give you access to the <html> element as a block-level element; if you set a width, offsetWidth will reflect it.
How can we determine the total height of all child elements?
el.scrollHeight;Why should we not declare a width on the html element?
In most cases, we should not have to declare a width for the html element. The width of the <html> element is restricted by the width of the viewport. The <html> element takes 100% of the width of that viewport. The viewport, in turn, is exactly equal to the browser window: it’s been defined as such. The viewport is not an HTML construct, so you cannot influence it by CSS. It is possible for us to specify the width of the html element but it is not recommended. If you know your DOM, you know that document.documentElement is in fact the <html> element: the root element of any HTML document. However, the viewport is one level higher, so to speak; it’s the element that contains the <html> element. That might matter if you give the <html> element a width. (I don’t recommend that, by the way, but it’s possible.) In that situation document.documentElement.clientWidth and document.documentElement.clientHeight still gives the dimensions of the viewport, and not of the <html> element. (This is a special rule that goes only for this element only for this property pair. In all other cases the actual width of the element is used.)
How can we determine the size of the <html> element?
Just as on desktop, document.documentElement.offsetWidth and document.documentElement.offsetHeight give the total size of the <html> element in CSS pixels. This is another way to determine the size of a frame or window object.
Does document.documentElement.clientWidth always return the width of the view port?
Yes. document.documentElement.clientWidth always return the width of the view port even though we may have declare a width for the html element.
How can we determine the size of the html element if we previously declare it?
So clientWidth/Height gives the viewport dimensions in all cases. To find the dimensions of the <html> element itself, use document.documentElement.offsetWidth and document.documentElement.offsetHeight.
How can we grow an element so that all of its content is displayed without the scrollbar?
set its clientHeight to its scrollHeight:
el.clientHeight = el.scrollHeight;
el.style.height = el.scrollHeight + "px";The read-only attribute (scrollHeight) is a measurement of the height of an element's content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin. See https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight
How can we change the CSS float property using JavaScript?
element.style.styleFloat = 'left'; // Internet Explorer
element.style.cssFloat = 'left'; // Other browsers.How can we detect if the browser is using quirks mode?
(document.compatMode==='CSS1Compat'?'Standards':'Quirks')The above code check to see if document.compatMode is equal to 'CSS1Compat'. If it is equal to 'CSS1Compat', then the browser is in standard-compliance mode. If document.compatMode is not equal to 'CSS1Compat', then it is using quirks mode. See http://stackoverflow.com/questions/627097/how-to-tell-if-a-browser-is-in-quirks-mode
How can we determine the height and width of an element?
This depends on the box model being used. For IE quirksmode, the height and width of the element includes the borders and padding. For standard compliant mode, the height and width of the element does not include border and padding. Always use DOCTTYPE. I NEED A CONFIRMATION ON THIS. I SHOULD HAVE THIS INFORMATION DOCUMENTED ON SOME OTHER PAGES ON THIS WIKI.
How can we determine the position of an element?
We might at first think that obtaining the position of an element is a simple task. All we need to do is to figure out where the element is in relation to the window origin right?
When the top and left CSS values are applied to an element, these values are in relation to the element's offset parent. In simple cases, this offset parent is the window (or more precisely the body element). But if any ancestor of an element has a CSS position value of relative or absolute, the closet such ancestor is the element's offset parent.
How can we append a style node to the DOM?
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
style.sheet.insertRule('[data-make-raw] { outline: 1px solid tomato; }',0);
