Přesun html uzlů pomocí css rubrika: Kódování: CSS
2
Andreaw Fean
Ahoj.
Mám takovouto struktůru:
<div class="box"> <input name="name" /> <input name="surname" /> </div> <div class="box"> <input name="title" /> </div>
A já bych chtěl ten element div.box > [name="title"] přesunout do toho prvého boxu před input[name="surname"]. Tak samozřejmě bych to udělal pomocí javascriptu. Ale existuje nějaká technika, nebo třeba jen prototyp návrhu, jak takhle pomocí css stěhovat prvky?
Potřeboval bych takovéhle scénáře:
- přesunout před
- přesunout za
- zduplikovat před
- zduplikovat za
Možná bych vymyslel ještě nějaké další.
Díky
4
jtojnar
Jen pro zajímavost, [CSS Images Module Level 4](https://drafts.csswg.org/css-images-4/#element-notation) definuje operátor element() který jde využít k podobnému účelu. Původně jej snad mělo být možné použít ve vlastnosti [content](https://developer.mozilla.org/en-US/docs/Web/CSS/content), ale zdá se, že to nikdo neimplementoval; jen Firefox to podporuje s prefixem a jen pro [pozadí](https://developer.mozilla.org/en-US/docs/Web/CSS/background). A taky už specifikace říká, že to přenáší jen zjev prvku, ne prvek samotný, takže se to tady neuplatní (s „klonovaným“ prvkem nelze interagovat a originál nelze skrýt běžným způsobem, jinak zmizí i kopie).
Demo: https://jsfiddle.net/jtojnar/8ncz5g1v/
Příklad rozumného použití: https://css-tricks.com/using-the-little-known-css-element-function-to-cr...
Vybavuji si, že jsem kdysi četl i o silnější možnosti transplantace celého prvku do libovolného jiného prvku ve stránce, ale nemůžu to nikde najít. Buď se to rozhodli neimplementovat z důvodů výkonu a zmizelo to z indexů, zadávám špatná klíčová slova, nebo, nejpravděpodobněji, mě šálí paměť.
Pro zobrazení všech 5 odpovědí se prosím přihlaste:
Nebo se přihlaste jménem a heslem:
Komentáře