Kaip išplėsti ir sutraukti DIV „JavaScript

„Divs“ leidžia grupuoti elementus tinklalapyje. Yra du būdai, kaip išnykti tinklalapio „divs“. Pirma, kodas padaro disko į nematomą elementą arba galite naudoti žlugimą. Jei paprasčiausiai padarysite div nematomą, tuščia erdvė lieka ten, kur yra disko. Sutraukiant „div“ pašalina tą tuščią erdvę, kad jūsų tinklalapyje nebūtų „skylės“. Naudodami „JavaScript“, susietą su vienu mygtuku, sukuriate savo „divs“, kurie žlunga ir plečiasi, kai vartotojai spustelės mygtuką.

Pridėti „Div“ į tinklalapį

1 veiksmas
Pradėti „Notepad“ ir

2 žingsnis
Pridėti šį HTML kodo bloką į dokumento skyrių:

Div tekstas
Šis kodas sukuria div ir mygtuką. „Div“ yra dalis su tekstu, kuriame rašoma: „Div tekstas“. Pakeiskite tą tekstą, ką norite. Paspaudus „mygtukas“ vadinama „JavaScript“ funkcija. Dėl šios funkcijos „div“ persijungia iš sutrumpintos būsenos į išplėstinę būseną.
Raskite „ID“ žymę „id“ ir „class“. Norėdami sukurti besiplečiančią ir žlugusią divą, turite duoti ID ID reikšmę. Šiame pavyzdyje ši vertė yra „MyDiv“. „Div“ taip pat turi klasės turtą. Šiuo atveju ši turto vertė yra „divVisible“. Tai yra CSS klasės pavadinimas, apibrėžtas kitame skyriuje.

Pridėti CSS klases ir „JavaScript“

1 veiksmas
Įtraukite šį CSS kodą į dokumento „Head“ skyrių: sukuria „divVisible“ klasę ir kitą klasę, pavadintą „divHidden“. Klasė „divVisible“ nustato rodymo reikšmę „blokuoti“. „Blokavimo“ reikšmė daro bet kokį HTML elementą, kuris nurodo klasę, ir išplečia jį, kad užima erdvę tinklalapyje. Klasė „divHidden“ nustato rodymo reikšmę „nėra“. Bet koks HTML elementas, nurodantis tą klasę, žlunga ir nepalieka vietos.

2 žingsnis
Pridėti šį „JavaScript“ kodą žemiau CSS kodo: DivID kintamasis turi „div“, kurią norite sutraukti ir išplėsti, id vertę. Ši vertė yra „MyDiv“. Likusi kodo dalis gauna disko dabartinį CSS klasės pavadinimą ir persijungia jį kiekvieną kartą, kai veikia kodas. Pirmą kartą vykdant kodą jis pakeičia „div“ klasės pavadinimą į „divHidden“. Antrą kartą jis pakeičia klasės pavadinimą atgal į „divVisible“.

3 žingsnis
Išsaugokite HTML dokumentą ir atidarykite jį savo naršyklėje. Rodoma dalis, kurioje yra jūsų dalis.
Spustelėkite mygtuką „Sutraukti /išplėsti“. Tekstas žlunga. Norėdami išplėsti tekstą, dar kartą spustelėkite mygtuką. Atkreipkite dėmesį, kaip mygtukas ir kiti elementai, esantys žemiau teksto, pakyla aukštyn, kai tekstas žlunga ir pereina žemyn, kai tekstas plečiasi
URL:https://lt.whycomputer.com/internetas/100406624.html