@html_first/element_modifier
v1.3.0
Published
simple element modifier for @html_first; client only
Downloads
3
Maintainers
Keywords
Readme
element_modifier
simple client side element modifier for @html_first
internal dependency;
installation
npm i @html_first/element_modifier
js usage example
// @ts-check
import { _$ } from '@html_first/element_modifier';
const element = document.querySelector('#example_element');
new _$(element)
.attributes({
visibility: 'visible',
})
.classList({
add: [''],
remove: ['box'],
}) /** chainnable with _$ methods */;
method list
outerHTML
:- chainable:
false
; - params:
value
:string
;
- chainable:
innerHTML
:- chainable:
true
; - params:
value
:string
;
- chainable:
innerText
:- chainable:
true
; - params:
value
:string
;
- chainable:
textContent
:- chainable:
true
; - params:
value
:string
;
- chainable:
value
:- chainable:
true
; - params:
value
:string
;
- chainable:
styles
:- chainable:
true
; - params:
styles_object
:Object.<string,string>
;
- chainable:
classList
:- chainable:
true
; - params:
class_list_definition
:Object.<'add'|'remove',string[]>
;
- chainable:
append
:- chainable:
true
; - detail: will append element as last child;
- params:
elem
:'HTMLElement'|'Element'
;
- chainable:
prepend
:- chainable:
true
; - detail: will prepend element as first child;
- params:
elem
:'HTMLElement'|'Element'
;
- chainable:
before
:- chainable:
true
; - detail: will insert element before
this.element
; - params:
elem
:'HTMLElement'|'Element'
;
- chainable:
after
:- chainable:
true
; - detail: will insert element after
this.element
; - params:
elem
:'HTMLElement'|'Element'
;
- chainable:
attributes
:- chainable:
true
; - detail: will modify
this.element
attributes; - params:
custom_attribute_n_value
:Object.<string,string|boolean>|NamedNodeMap
;
- boolean to toggle attribute;
- you can get NamedNodeMap from
${your_element}.attributes
;
- chainable:
replace
:- chainable:
false
; - params:
elem
:HTMLElement|Element
;
- chainable:
script
:- chainable:
true
; - params:
callback
:((element:HTMLElement|Element)=>Promise<any>)
;
- where
arguement_0
(element
) isthis.element
- this method return
promise
- which in atlaAS case, it will block your
__Queue
and enable you to perform async funtions like fetching things and stuffs...;
- which in atlaAS case, it will block your
- chainable: