JS mijenjanje CSS svojstava HTML DOM Style Object

JS mijenjanje CSS svojstava HTML DOM Style Object 1

Mijenjanje svojstava elemenata document. get. Element. By. Id(id). style. property=„value”; PRIMJER. <html> <body> <p id="p 2">Hello World!</p> <script> document. get. Element. By. Id("p 2"). style. color="blue"; </script> <p>The paragraph above was changed by a script. </p> </body> </html> 2

Primjer. <!DOCTYPE html> <body> <h 1 id="id 1">My Heading 1</h 1> <button type="button" onclick="document. get. Element. By. Id('id 1'). style. color='red'"> Click Me!</button> </body> </html> 3

Skrivanje/otkrivanje elemenata � …style. visibility='hidden' � …style. visibility='visible' 4

Style objekt � Style objektu možemo pristupiti preko: � Dokumenta � Ili elementa na koji želimo primijeniti stil. document. get. Element. By. Id("id"). style. property="value" 5

Kategorije Style svojstava 6 Background Margin/Padding Border/Outline Positioning/Layout Generated Content Printing List Table Misc Text

Svojstvo background � Postavlja/mijenja pet svojstava pozadine: � background-color � background-image � background-repeat � background-attachment � background-position object. style. background="color image repeat attachment position„ ili 7

Svojstvo background object. style. background. Color=„boja”; object. style. background. Image=„url(‘url’)”; object. style. background. Repeat= „repeat” „repeat-x” „repeat-y” „no-repeat” „inherit”” object. style. background. Attachment= „scroll” „fixed” „local”

Svojstvo background object. style. background. Position= „top left”; „top center” „top right” „ center left” „center” „center right” „bottom left” „bottom center” „bottom right”

Svojstvo border object. style. border="width style color„; � Postavlja tri svojstva obruba: � border-width � border-style � border-color object. style. border. Width= 10 „thin” „medium” „thick” „length” „Inherit”

Svojstvo border object. style. border. Color= object. style. border. Style= "color” „transparent” „inherit" „none” „hidden” „dotted” „dashed” „solid” „double” „groove” „ridge” „inset” „outset” „inherit„

Zadaci. � Na web stranici postavi tri odlomka. S web-a preuzmi dvije slike. Odlomak: 1. 1. Odlomak 2. 1. Slika u pozadini s desne strane odlomka. Odlomak 3. 1. 12 Boja pozadine plava, obrub crvena puna crta debljine 10 px Slika u pozadini koja se ponavlja vodoravno na dnu odlomka.