HtmlElement

Constructor for HTMLElement class

You can pass any attributes as options. There are a few reserved keywords for specific options.

Get/Set bottom offset in pixels (relative to wiewport) You can set value by assigning any of :

• null, undefined : Remove value
• {Number} : Value will be interpreted in pixels
• {String} : any css acceptable value for the property (e.g '5vi', '1em'...)

See:

• position

The underlying DOM node object

Convenience property to check if the object is an instance of this class

Get/Set height in pixels You can set value by assigning any of :

• null, undefined : Remove value
• {Number} : Value will be interpreted in pixels
• {String} : any css acceptable value for the property (e.g '5vi', '1em'...)

See:

• position

Check if the HtmlElement is present in DOM

Get left offset in pixels (relative to wiewport)

See:

• position

Set left offset in pixels (relative to wiewport)

You can set value by assigning any of :

• null, undefined : Remove value
• {Number} : Value will be interpreted in pixels
• {String} : any css acceptable value for the property (e.g '5vi', '1em'...)

See:

• position

The length property if useful to quickly check what kind of underlying node object have been returned :

• 0 means it's a DocumentFragment
• 1 means it's a node (HTMLElement...)
• More than 1 means it's a Collection (@see elementify.Collection)

Alias for the element property member that returns null instead of undefined

See:

• HtmlElement#element

The options passed to the constructor

Get the outerHTML string of the underlying node

Get the position property of the element. The calculation only occurs at first call or when window is resized, rotated or scrolled.

Warning : Calculations can be pretty slow on huge amount of elements

A cached version of the result is available in the _metrics property of the HtmlElement. It will be only be generated after a first call to position or another getter/setter. It will then be regenerated after events that affect window size or scroll

If the element is not in DOM, all values will return undefined.

Get/Set right offset in pixels (relative to wiewport) You can set value by assigning any of :

• null, undefined : Remove value
• {Number} : Value will be interpreted in pixels
• {String} : any css acceptable value for the property (e.g '5vi', '1em'...)

See:

• position

Get the root Node element for the HtmlElement The result is not enhanced as an HtmlElement because it will mostly be a document object which is not a Node object.

Get scroll X offset of the window in pixels

See:

• position

Get scroll Y offset of the window in pixels

See:

• position

Get the computed styles of the underlying node. Use with care : It can be painfully slow and must be avoided for huge set of automated ops on style

Get/Set top offset in pixels (relative to wiewport) You can set value by assigning any of :

• null, undefined : Remove value
• {Number} : Value will be interpreted in pixels
• {String} : any css acceptable value for the property (e.g '5vi', '1em'...)

See:

• position

Get the visibility of an HtmlElement. It will only return false if the element is out of the DOM or with a display style property set to none.

Use with care : It can be painfully slow and must be avoided for huge set of automated ops on elements if display property is not set inline

Get/Set width in pixels You can set value by assigning any of :

• null, undefined : Remove value
• {Number} : Value will be interpreted in pixels
• {String} : any css acceptable value for the property (e.g '5vi', '1em'...)

See:

• position

Add class(es) to an HtmlElement

Insert an element before another. A Documentfragement wrapper will be inserted if Element have no parent node.

The second parameter can be used to get the parent element for chaining instead of the element itself.

Append an element to another

Get or set given attribute(s) of the element.

The getter can be used in two ways :

• A string will return an attribute value
• Array of attributes names will return a keyValueObject

The setter can be used in three ways :

• A string + value will set the attribute
• A string + null will delete the attribute
• A keyValueObject of attributes/values for multiple settings

Insert an element before another. A Documentfragement wrapper will be inserted if Element have no parent node.

The second parameter can be used to get the parent element for chaining instead of the element itself.

Element's nth child finder

Element's childs finder based on a DOM query selector

Returns a deep clone of the HtmlElement. The clone will contains the same child nodes.

Get or set data attribute(s) of the element.

With no arguments, it will return a keyValueObject with all data attributes.

Data items name will be automatically converted from dash to camel-case if needed.

Set the display style property of an HtmlElement

Empty an Element

Fade In element given a linear easing

Fade Out element given a linear easing

Check if an HtmLElement have given class(es)

Hide an HtmlElement by setting its display property to 'none'.

Get/Set the HTML content of the node

Matches returns true if the element matches the query selector

Element's next sibling finder

Element's next siblings finder based on a DOM query selector

Element's n-th parent finder

Element's parent finder based on a DOM query selector

Prepend an element to another

Element's previous sibling finder

Element's previous siblings finder based on a DOM query selector

Remove an Element

Remove class(es) from an HtmlElement

Returns a shallow copy of the HtmlElement

Show an HtmlElement by setting its display property. The property value can be override for custom results (e.g. 'flex')

Get/Set style properties of an HtmlElement based on its node style attribute.

Properties name will be camelized when read from style string and dashed when set to style string.

Many syntaxes are available. See examples.

You can remove a style property by setting its value to null

Example:

 var e = new Element('<div style="color:red;margin:1em"></div>');
 e.style('color'); // returns 'red'
 e.style('color', 'yellow'); // Set color to yellow and returns e for chaining
 e.style(['color', 'margin']); // returns {color:'red', margin: '1em'}
 e.style({color: 'yellow', padding: '5px'}); // Set color to yellow, padding to 5px and returns e for chaining
 e.style({paddingLeft: '10px', margin: '5px'}); // Set color to yellow, padding to 5px and returns e for chaining

Toggle an HtmlElement visibility by setting its display property. The "show" property value can be override for custom results (e.g. 'flex')

Use with care : It can be painfully slow and must be avoided for huge set of automated ops on elements if display property is not set inline

Toggle class(es) from an HtmlElement

Unwrap an Element (and its siblings) and delete its parentNode

Wrap an Element into another. If no Element provided, the wrapper will be set to a DocumentFragment node.

The second parameter can be used to get the parent element for chaining instead of the element itself.

Refresh position object at first call or after a resize / changeOrientation event