Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Změna velikosti písma podle počtu položek</title> <h1>Změna velikosti písma podle počtu položek</h1> <p>V závislosti na počtu položek se mění jejich velikost písma (1 položka, 2 až 3, 4 až 5, 6 a více).</p> <p> <button onclick="pridat()">+ Přidat</button> <button id="odebratBtn" style="display: none" onclick="odebrat()">Odebrat</button> </p> <div class="polozky" id="polozky"> <div class="polozka">Položka</div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.polozky { overflow: hidden; } .polozka { width: 5em; text-align: center; line-height: 2em; background: #1081DD; float: left; margin: .2em; } .polozka:nth-last-child(-n + 3):first-child, .polozka:nth-last-child(-n + 3):first-child ~ .polozka { font-size: 130%; } .polozka:only-of-type:first-child { font-size: 140%; } .polozka:nth-last-child(n + 4):first-child, .polozka:nth-last-child(n + 4):first-child ~ .polozka { font-size: 120%; } .polozka:nth-last-child(n + 6):first-child, .polozka:nth-last-child(n + 6):first-child ~ .polozka { font-size: 100%; }
CSS
Autoformát
CSS reset
Až na konci
var polozky = document.getElementById('polozky'); var odebratBtn = document.getElementById("odebratBtn"); function pridat() { var klon = polozky.firstElementChild.cloneNode(true); polozky.appendChild(klon); if (polozky.childElementCount > 1) { odebratBtn.style.display = ""; } } function odebrat() { if (polozky.childElementCount > 1) { polozky.removeChild(polozky.firstElementChild); } if (polozky.childElementCount == 1) { odebratBtn.style.display = "none"; } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>