Разширяване и свиване на DIV в JavaScript

Divs ви позволява да групирате елементи в уеб страница. Има два начина да накарате divs на уеб страница да изчезнат. Първо, кодът прави div в невидим елемент, или можете да използвате колапс. Ако просто направите div невидим, остава празно място, където съществува div. Свиването на div премахва празното пространство, като не оставя "дупка" в уеб страницата си. С помощта на JavaScript, свързан с бутон, създавате собствени разделители, които се свиват и разширяват, когато потребителите кликнат върху бутона.

Добавяне на Div към уеб страница

Стъпка 1: Стартирайте Notepad и Отворете всеки HTML документ.

Стъпка 2
Добавете този блок HTML код към раздела "тяло" на документа:

Разделен текст
Този код създава div и бутон. Div съдържа параграф с текст, който гласи: "Div текст." Заменете този текст с каквото искате. "Бутонът" извиква JavaScript функцията при кликване. Тази функция кара div да превключва между свито състояние и разширено състояние.
Намерете свойствата "id" и "class" в маркера div. За да създадете разширяващ се и свиващ се div, трябва да дадете на div стойността на id. В този пример тази стойност е "MyDiv". Div също има свойство клас. В този случай стойността на това свойство е "divVisible". Това е името на CSS класа, дефиниран в следващия раздел.

Добавяне на CSS класове и JavaScript

Стъпка 1
Добавете следния CSS код в раздела "главата" на документа: създава класа "divVisible" и друг клас с име "divHidden". Класът "divVisible" задава стойността на дисплея на "block". Стойността "block" прави всеки HTML елемент, който препраща към клас, видим и го разширява, за да заема място на уеб страницата. Класът "divHidden" задава стойността на дисплея на "none". Всеки HTML елемент, който се позовава на този клас, се разпада и не оставя място зад себе си. Тази стойност е "MyDiv". Останалата част от кода получава името на текущия CSS клас на div и го превключва при всяко изпълнение на кода. Първият път, когато кодът се изпълнява, той променя името на класа div на "divHidden". При втория път той променя името на класа обратно на "divVisible."

Стъпка 3
Запазете HTML документа и го отворете в браузъра си. Появява се абзацът, съдържащ вашия параграф.
Кликнете върху бутона "Свиване /разширяване". Текстът се свива. Натиснете бутона отново, за да разширите текста. Забележете как бутонът и другите елементи под текста се придвижват нагоре, когато текстът се свива и се придвижва надолу, когато текстът се разширява.

URL:https://bg.whycomputer.com/Internet/100206624.html