# DOM-hjälpare: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM och APPEARANCE

> Läs data-attribut, fråga om ett element visas eller finns på skärmen, lägg till stilar som du kan ersätta, flytta element i sin förälder, uppdatera en lista utan att rita om den och ställ in sidans färger och mörka läge.

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

- `ATTRD(element or event, [name])` läser `data-<name>` (standard `data-id`) hos ett element, ett jQuery-objekt eller en händelses element; för ett vanligt objekt läser den egenskapen.
- `HIDDEN(element)` är `true` när elementet inte visas (det eller en förälder har `display: none`; **ett element som är direkt barn till body rapporteras alltid som inte dolt**, kontrollen börjar vid dess förälder); `VISIBLE(element, [threshold], [mode])` är `true` när det är inom den synliga delen av fönstret (`mode` `'above'` eller `'below'` frågar var det är när det inte är det). `NOTFOCUSED()` är `true` när webbläsarfliken ligger i bakgrunden och `inDOM(element)` är sant så länge elementet finns i dokumentet.
- `WIDTH([element])` returnerar storleksklassen för elementets bredd (standard: fönstret): `'xs'`, `'sm'`, `'md'` eller `'lg'` (gränserna finns i `DEF.devices`). `WW` och `WH` är fönstrets storlek; `$W` är fönstrets jQuery-objekt; `SCROLLBARWIDTH()` är bredden som en rullningslist tar.
- `SCROLLBAR(element, [options])` omsluter ett element med en egen rullningslist och returnerar det; `scrollbar.resize()` räknar om den efter att innehållet ändrats.
- `isTOUCH`, `isMOBILE`, `isROBOT`, `isSTANDALONE`, `isPRIVATEMODE` och `isIE` är booleans om webbläsaren, satta när sidan startar.
- `STYLE(css, [id], [selector])` lägger till en `<style>` i head. Med ett `id` ersätts stilen när du anropar den igen med samma id; med en `selector` omsluts varje regel av den (`'.a { }'` blir `'#p .a{ }'`).
- `NODEINDEXOF(element)` är elementets position bland sina syskon, `NODEINSERT(element, reference, [before])` flyttar ett element efter (eller före) ett annat och `NODEMOVE(element, [up])` flyttar det ett steg ner (eller upp).
- `DIFFDOM(parent, selector, html, [attribute])` gör barnen till `parent` som matchar `selector` lika med dem i `html`, **utan att rita om** dem som redan finns: ett element är detsamma när dess `attribute` har samma värde (utan `attribute`, när hela dess HTML är densamma). Den tar bort dem som inte finns i den nya listan, lägger till de nya och sätter dem i ordningen från `html`, och returnerar `{ add, upd, rem }`. Innehållet i ett element som behålls ersätts **inte**.
- `APPEARANCE({ color, dark, large, <name>: value })` ställer in sidans utseende: `dark` och `large` växlar klasserna `ui-dark` och `ui-large` på body, `color` och varje annan nyckel blir CSS-variabler för `:root` (`--color`, och `--rgb` beräknas från färgen) i en enda `<style id="cssappearance">`.
- `ENVIRONMENT(name, version, language, [env])` sätter namnet som prefixar nycklarna i `localStorage`, versionen och språket (`DEF.localstorage`, `DEF.version`, `DEF.language`) och, med `env`, flera `ENV()`-värden.

```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>
```
