- Source:
Methods
defineNode(node, definition, boilerplateNodeopt, nullable) → {HTMLElement}
Creates element attributes for an (existing) element, providing the possibility to declare another element as a boilerplate element to inherit attributes from.
The basic premise is this: Define all attributes in a plain object, where the key is the attribute name and the
value is the attribute value. class may be provided as an array of class definitions and style may be provided
as a plain object (defining styles as key/value pairs, just as is applyStyles). You may even define style as an
array of plain objects. In both arrays, the last entries have precedence. Everything else has to be a string.
You can declare a boilerplateNode to use another element as source to inherit attributes from. To inherit an
attribute (if it exists), declare the attribute with a value of "<-".
Normally all attributes of the target element will be overwritten with provided/inherited values, but you may declare
attributes with a preceding "+" to just add to anything already there. class as +class and style as +style
for example. In these cases, classes and styles would be added to anything already declared. Normal string values
would simply be concatenated.
If you want to inherit all data-attributes or on-handlers from an element you may declare the fields data* and
on* as "<-" to inherit all attributes starting with data- or on. This would even work as +data* and +on*.
Keep in mind that explicit definitions always have precedence over inherited values, so data* being "<-" and an
additionally declared data value will result in the element getting the declared value on the field and not having
the inherited value.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
node |
HTMLElement | the pre-existing node to (re)define |
||
definition |
Object | a plain object declaring attributes to set or inherit from another object of the form {attributeName : attributeValue|true} |
||
boilerplateNode |
HTMLElement |
<optional> <nullable> |
null | a node to take the definition from, all values set to true in definition are inherited from here |
- Source:
- See:
Throws:
-
error if target is not an HTMLElement
-
error if definition is not a plain object
Returns:
- Type
- HTMLElement
Example
defineNode(existingElement, {'id' : 'kitten', '+class' : ['cute', 'fluffy'], '+style' : ['display:none;', {position : 'absolute'}]});
defineNode(existingElement, {'+class' : '<-', 'data*' : '<-', 'data-foo' : 'this will have precedence over data*'}, anotherElement);