# DOM helpers: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM and APPEARANCE > Read data attributes, ask if an element is shown or on the screen, add styles that you can replace, move elements in their parent, update a list without redrawing it, and set the colors and the dark mode of the page. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: en Content-SHA256: 03844133175a14c82a371246bc135818ff6e040648985e9be5866b997a1b4e84 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b Review: not-recorded - `ATTRD(element or event, [name])` reads `data-` (default `data-id`) of an element, a jQuery object or the element of an event; for a plain object it reads the property. - `HIDDEN(element)` is `true` when the element is not shown (it or a parent is `display: none`; **an element that is a direct child of the body is always reported as not hidden**, the check starts from its parent); `VISIBLE(element, [threshold], [mode])` is `true` when it is inside the visible part of the window (`mode` `'above'` or `'below'` asks where it is when it is not). `NOTFOCUSED()` is `true` when the browser tab is in the background and `inDOM(element)` is true while the element is in the document. - `WIDTH([element])` returns the size class of the width of the element (default: the window): `'xs'`, `'sm'`, `'md'` or `'lg'` (the limits are in `DEF.devices`). `WW` and `WH` are the size of the window; `$W` is the jQuery object of the window; `SCROLLBARWIDTH()` is the width that a scrollbar takes. - `SCROLLBAR(element, [options])` wraps an element with a custom scrollbar and returns it; `scrollbar.resize()` recalculates it after the content changed. - `isTOUCH`, `isMOBILE`, `isROBOT`, `isSTANDALONE`, `isPRIVATEMODE` and `isIE` are booleans about the browser, set when the page starts. - `STYLE(css, [id], [selector])` adds a `