Někdy je při rozvržení webové stránky nutné skrýt některé prvky na ní umístěné. Například pokud chcete, aby návštěvník neviděl tlačítka pro odeslání formuláře, dokud nebudou vyplněna všechna povinná pole. Nebo pokud tlačítko není určeno k použití návštěvníkem vůbec, ale skript umístěný na této stránce by jej měl „kliknout“.
Instrukce
Krok 1
Pomocí vlastnosti zobrazení kaskádových stylů (CSS) můžete vypnout nebo zobrazit požadované prvky stránky. Podle mezinárodních standardů lze této vlastnosti přiřadit více než jeden a půl tuctu hodnot, které určují různé metody zobrazení. Pouze čtyři jsou však různé prohlížeče (tj. Fungují ve všech hlavních prohlížečích). Mezi těmito čtyřmi je žádná hodnota, kterou nepotřebujete, což vám umožní skrýt požadovaný prvek stránky.
Krok 2
Vytvořte požadovanou sadu pokynů pro CSS. V nejjednodušší podobě to může vypadat takto: button {display: none;} V takovém případě stránka nezobrazí všechna tlačítka používající značku….
Krok 3
Pokud chcete skrýt pouze jedno tlačítko nebo konkrétní skupinu tlačítek, přidejte k názvu třídy v pokynech indikaci. Například pojmenujte takovou třídu HideBtns a přidejte tento název do příkazu CSS: button. HideBtns {display: none;} Přidejte atribut třídy na požadované tlačítko v HTML kódu stránky a přiřaďte mu hodnotu HideBtns: skryté tlačítko
Krok 4
Pokud chcete například skrýt nejen tlačítko, ale i další prvky webového formuláře, použijte vlastnost zobrazení s hodnotou none na nadřazený prvek. Formulář je považován za „nadřazený“všech prvků umístěných mezi tagy a. Například:
Zde je uvnitř formuláře textové pole a tlačítko pro odeslání zadané hodnoty. Formulář je přiřazen ke třídě s názvem HideForm, takže pokud chcete skrýt vstupní pole i tlačítko, musíte změnit příkaz CSS takto: form. HideForm {display: none;}
Krok 5
Připravený kód vložte do výše uvedeného příkladu do záhlaví webového dokumentu (mezi značky a). Chcete-li prohlížeči návštěvníka sdělit, že se jedná o kód CSS, musí být uzavřen mezi otevírací a zavírací značkou stylu HTML:
button. HideBtns {display: none;}
