# DOM-segédek: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM és APPEARANCE

> Olvass data attribútumokat, kérdezd meg, hogy egy elem látszik-e vagy a képernyőn van-e, adj hozzá lecserélhető stílusokat, mozgass elemeket a szülőjükben, frissíts egy listát újrarajzolás nélkül, és állítsd be az oldal színeit és sötét módját.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: hu
Content-SHA256: 82b5bb3fabb9cc84623c36685a96422ad19f22b0d8038a492ba6001f536ed322
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

- Az `ATTRD(element or event, [name])` egy elem, egy jQuery objektum vagy egy esemény elemének `data-<name>` értékét olvassa (alapértelmezés `data-id`); sima objektumnál a tulajdonságot olvassa.
- A `HIDDEN(element)` akkor `true`, ha az elem nem látszik (ő vagy egy szülője `display: none`; **a body közvetlen gyermekeként szereplő elemet mindig nem rejtettnek jelenti**, az ellenőrzés a szülőjétől indul); a `VISIBLE(element, [threshold], [mode])` akkor `true`, ha az ablak látható részén belül van (a `mode` `'above'` vagy `'below'` azt kérdezi, hol van, ha nincs). A `NOTFOCUSED()` akkor `true`, ha a böngészőlap a háttérben van, az `inDOM(element)` pedig igaz, amíg az elem a dokumentumban van.
- A `WIDTH([element])` az elem szélességének méretosztályát adja vissza (alapértelmezés: az ablak): `'xs'`, `'sm'`, `'md'` vagy `'lg'` (a határok a `DEF.devices` helyen vannak). A `WW` és a `WH` az ablak mérete; a `$W` az ablak jQuery objektuma; a `SCROLLBARWIDTH()` a görgetősáv szélessége.
- A `SCROLLBAR(element, [options])` egyéni görgetősávval veszi körül az elemet, és visszaadja; a `scrollbar.resize()` újraszámolja, miután a tartalom megváltozott.
- Az `isTOUCH`, `isMOBILE`, `isROBOT`, `isSTANDALONE`, `isPRIVATEMODE` és `isIE` a böngészőről szóló logikai értékek, az oldal indulásakor állítódnak be.
- A `STYLE(css, [id], [selector])` egy `<style>` elemet ad a headhez. `id` esetén a stílus lecserélődik, ha ugyanazzal az azonosítóval újra hívod; `selector` esetén minden szabályt az veszi körül (a `'.a { }'` `'#p .a{ }'` lesz).
- A `NODEINDEXOF(element)` az elem pozíciója a testvérei között, a `NODEINSERT(element, reference, [before])` egy elemet egy másik után (vagy elé) mozgat, a `NODEMOVE(element, [up])` pedig egy hellyel lejjebb (vagy feljebb) mozgatja.
- A `DIFFDOM(parent, selector, html, [attribute])` a `parent` `selector`-ra illeszkedő gyermekeit az `html` gyermekeivel teszi azonossá, **újrarajzolás nélkül** azokat, amelyek már ott vannak: egy elem ugyanaz, ha az `attribute` értéke megegyezik (`attribute` nélkül, ha a teljes HTML-je azonos). Eltávolítja azokat, amelyek nincsenek az új listában, hozzáadja az újakat, és az `html` sorrendjébe teszi őket, majd `{ add, upd, rem }` értéket ad vissza. A megtartott elem tartalma **nem** cserélődik.
- Az `APPEARANCE({ color, dark, large, <name>: value })` beállítja az oldal megjelenését: a `dark` és a `large` a body `ui-dark` és `ui-large` osztályát kapcsolja, a `color` és minden más kulcs a `:root` CSS-változójává válik (`--color`, a `--rgb` pedig a színből számolódik) egyetlen `<style id="cssappearance">` elemben.
- Az `ENVIRONMENT(name, version, language, [env])` beállítja a `localStorage` kulcsainak előtagját adó nevet, a verziót és a nyelvet (`DEF.localstorage`, `DEF.version`, `DEF.language`), és `env` esetén több `ENV()` értéket.

```html public/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<p id="p">A paragraph</p>
	<div id="shown" style="width:300px;height:40px">Shown</div>
	<div id="hidden" style="display:none"><span id="inside">Inside</span></div>
	<div id="far" style="margin-top:3000px">Far away</div>
	<div id="box" style="width:200px;height:50px;overflow:auto"><div style="height:300px">tall</div></div>
	<ul id="list"><li id="a" data-id="a">a</li><li id="b" data-id="b">b</li><li id="c" data-id="c">c</li></ul>
	<ul id="diff"><li data-id="1">one</li><li data-id="2">two</li></ul>
</body>
</html>
```
