Capitolul 2. Schimbarea stilurilor diferitelor obiecte

În acest capitol, vă continuați să vă familiarizați cu diferite moduri de a schimba stilurile diferitelor obiecte. După cum am văzut deja, Dynamic HTML vă permite să modificați diferite atribute ale obiectelor, de exemplu, atributul SRC al obiectului sau STYLE în apropierea obiectului <DIV>.</p><br> <br> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-8686842323494376" data-ad-slot="1432548440"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8686842323494376" data-ad-slot="8648406449" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br><p>În acest capitol puteți găsi informații despre următoarele:</p> <p>obiect <IFRAME> vă permite să introduceți în documentul curent o fereastră în care va fi inclusă o parte sau un document HTML complet diferit. Calea în care este localizat documentul inserat este specificată în proprietatea SRR a obiectului IFRAME. Prin modificarea acesteia puteți modifica conținutul acestui obiect. Dar asta nu e tot. La fel cum accesați obiectele principale ale documentului, puteți accesa obiectele și documentul inserat. Ca dovadă, iată următorul exemplu care ilustrează modul de modificare a conținutului unui obiect IFRAME și modificarea culorii de fundal a documentului inserat, indiferent de conținutul său curent.</p> <p><HTML><br><HEAD><br><SCRIPT LANGUAGE="JScript"><br> funcție change_image () <<br> document.all.myiframe.src = "frame_content2.html"; <br>></p> <p>funcție change_background () <<br> document.frames.myiframe.document.body.style.backgroundColor = "verde"; <br>><br></SCRIPT><br></HEAD><br><BODY><br> <IFRAME id=myiframe src="frame_content.html">

Modificarea conținutului IFRAME

A doua funcție, de asemenea, nu are parametri, dar puteți experimenta trecând-o cu valoarea de culoare la care doriți să schimbați fundalul. Apoi, apelul său va arăta astfel: onclick = "change_background ('color')", iar în funcție însăși, trebuie să faceți următoarele modificări:

funcție change_background (culoare) document.frames.myiframe.document.body.style.backgroundColor = culoare;
>

Acum, culoarea este scrisă fără ghilimele, deoarece nu este numele culorii, ci numele variabilei, argumentul funcției. Ca acest argument, puteți transmite orice nume de culoare valabil. Am spus că funcțiile vă permit să acționați foarte flexibil!

În primul capitol, ați învățat despre conceptul de clase, ca asociații de atribute ale unui obiect. În acest capitol continuăm discuțiile.

Există două moduri de a specifica stilul unui obiect: primul este direct, de exemplu, this.style.color = 'roșu' sau document.all.myHeading.style.fontSize = '20px'. Toate acestea sunt exemple de acces direct la proprietatea obiectului.

A doua modalitate este de a folosi clasele. Folosindu-le, puteți specifica mai multe linii simultan. Deci, de ce clase? Când aveți o mulțime de obiecte de aproximativ același scop pe pagină, puteți utiliza setările de stil globale pentru ele, aplicând un stil tuturor acestor obiecte. Fiecare obiect are un atribut care îl asociază cu o anumită clasă. Prin acest atribut, este ușor să setați stilul unui obiect asociându-l cu o anumită clasă. În plus, puteți modifica dinamic atributul clasei, respectiv modificarea stilului obiectului.

Acest exemplu arată cum puteți efectua o schimbare de clasă dinamică.

Arătați mouse-ul la mine pentru a vedea cum se schimbă dinamic clasele

Există două clase numite textRed și textBlack. Când inițializați, obiectul

clasa textBlack este atribuită, rețineți că în acest caz se utilizează atributul de clasă, iar numele clasei este scris fără ghilimele. Acest lucru se datorează faptului că acest cod face parte din limbajul HTML, dar când numele clasei trebuie modificat, există o parte a limbajului script în ghilimele duble, astfel încât atributul className este folosit și numele clasei este scris în citate simple.

Cu ajutorul clasei, puteți modifica toate atributele de stil, cu excepția poziției. Nu puteți defini un stil de poziționare: absolut sau poziționat altfel decât prin cod HTML direct.

Când atribuiți valori atributelor, rețineți că aceste valori sunt întotdeauna șiruri de caractere. Prin urmare, nu puteți manipula valorile de proprietate într-un sens matematic. Și mai ales în acest scop au fost introduse mai multe proprietăți, ale căror valori sunt numere întregi.

Dacă proprietatea presupune o anumită varietate de valori, puteți specifica valoarea în care introduceți valoarea. Următoarele exemple utilizează valorile punctelor și pixelilor. Acestea sunt specificate în mod corespunzător prin pointerii pt și px.

Dacă nu specificați un pointer, se utilizează valoarea implicită. Există un avantaj: puteți specifica valoarea unei proprietăți ca număr întreg. Cele două linii următoare sunt identice:

document.all.MyElement.style.fontSize = "72";
document.all.MyElement.style.fontSize = 72;

Articole similare

Pagina anterioară

Pagina următoare

Dhtml - html dinamic

Arătați mouse-ul la mine pentru a vedea cum se schimbă dinamic clasele

Articole similare

Trimiteți-le prietenilor: