Modern ismeretek WEB oldalon : Javascript ismertető HTML formátumban
Style objektum |
||
 A Style objektum bemutatása
|
||
| Stílus megadások | ||
| Elemfüggvények (metódusok) : | ||
| getAttribute() |   |
Stílus tulajdonság lekérdezése |
| removeAttribute() | |
Stílus tulajdonság törlése |
| setAttribute() | |
Stílus tulajdonság hozzáfűzése |
|
<html><head><title>Teszt</title>
<script language="JavaScript">
function befest(){
document.all.nagy_kek.style.backgroundColor = "lightblue";
document.all.nagy_kek.style.fontSize = "22pt";
document.all.nagy_kek.style.padding = "6mm";
}
</script>
</head><body>
<p id="nagy_kek">Ez itt a próbaszöveg/p>
<a href="javascript:befest()">Kék hátteret csinál</a>
</body></html>
|
A példában létrehozunk egy szövegstílus bejegyzést nagy_kek néven. Ha a hivatkozásra kattintunk, akkor az meghívja a befest() függvényt, melyben több stílus tulajdonságot módosítunk egyszerre : így a háttérszínt, betűméretet és távolságot.
A következő sajátosságot jegyezze meg : Ha a JavaScriptben egy CSS stílus értéket lekérdezünk vagy módosítunk, akkor a kötőjel elmarad és a második szó nagybetővel van írva, tehát a background-color megjelenése a JavaScriptben backgroundColor.
Stílus megadásokA következő táblázat MS Internet Explorer 4.0 által ismert stílus tulajdonságokat sorolja fel :
| JavaScript megadás | Rövid leírás | JavaScript megadás | Rövid leírás |
| background | háttérkép | fontstyle | betűstílus |
| backgroundAttachment | vízjel | fontVariant | karakterváltozat |
| backgroundColor | háttérszin | fontWeight | karaktervastagság |
| backgroundImage | háttérkép | height | elem magasság |
| backgroundPosition | háttérkép poziciója | left | baloldal távolsága |
| backgroundRepeat | háttérkép ismétlés | letterSpacing | jeltávolság |
| border | keret | lineHeight | sormagasság |
| borderBottom | keret lent | listStyle | lista megjelenítés |
| borderBottomColor | keretszin lent | listStyleImage | grafika stilus |
| borderBottomStyle | keretart lent | listStylePosition | listastílus pozició |
| borderBottomWidth | keretvastagság lent | listStyleType | listastílus tipusa |
| borderColor | keretszín lent | margin | margó |
| borderLeft | keret baloldalt | marginBottom | alsó margó |
| borderLeftColor | keretszín baloldalt | marginLeft | bal margó |
| borderLeftStyle | keret stílus baloldalt | marginRight | jobb margó |
| borderLeftWidth | keretvastagság baloldalt | marginTop | felső margó |
| borderRight | keret jobboldalt | overflow | túllógás |
| borderRightColor | keretszin jobboldalt | padding | cellabélés |
| borderRightStyle | keretart jobboldalt | paddingBottom | alsó cellabélés |
| borderRightWidth | keretvastagság jobboldalt | paddingLeft | bal cellabélés |
| borderStyle | keretstílus | paddingRight | jobb cellabélés |
| borderTop | keret fent | paddingTop | felső cellabélés |
| borderTopColor | keretszin fent | pageBreakAfter | utána lapdobás |
| borderTopStyle | keretstílus fent | pageBreakBefore | előtte lapdobás |
| borderTopWidth | keretvastagság fent | position | pozició |
| borderWidth | keretvastagság | align | igazítás |
| clear | törlés | textDecoration | szöveg dekoráció |
| clip | kijelzőterület megadás | textIndent | szövegirány |
| color | szövegszín | textTransform | szöveg átalakítás |
| cursor | egér kurzor | top | pozicionálás fentről |
| display | láthatóság (helyfoglalás nélkül) | verticalAlign | vizszintes igazítás |
| font | betű | visibility | láthatóság (helyfoglalással) |
| fontFamily | betűcsalád | width | elemszélesség |
| fontSize | betűnagyság | zIndex | rétegpozició takaráskor |
getAttribute()Megadja, hogy egy HTML elemre van-e stílus megadás. Ha van, akkor a visszatérő érték a stílus értéke, mely különben üres sztring. A következő paramétereket várja :
1. Style-megadás = a keresett stílus
megadás.
2. kis/NAGYbetű = true értéket
kell adni, ha azt akarjuk, hogy a stílus megadásban a
kis és Nagybetűt különböztesse meg , illetve false
ha ez érdektelen.
<html><head><title>Teszt</title>
<script language="JavaScript">
function Teszt(){
x = document.all.jumbo.style.getAttribute("fontSize","false");
alert(x);
}
</script>
</head><body">
<p id="jumbo" style="font-size:20pt">Szöveg</p>
<a href="javascript:Teszt()">Teszt</a>
</body></html>
|
A példában lekérdezzük, hogy a jumbo nevű HTML elemnek van-e font-size (CSS szintakszis) vagy fontSize (JavaScript szintakszis) stílus megadása, mely értéket (20pt) egy üzenőablakban kiiratjuk.
removeAttribute()Töröl egy bizonyos tulajdonságot a stílus
megadásból. A következő paramétereket várja :
1. attributum = a kívánt stílus
tulajdonság a HTML tag-ban.
2. kis/NAGYbetű = true értéket
kell adni, ha azt akarjuk, hogy a stílus megadásban a
kis és Nagybetűt különböztesse meg , illetve false
ha ez érdektelen.
<html><head><title>Teszt</title>
<script language="JavaScript">
function Teszt(){
document.all.bekezdes.style.removeAttribute("color","false");
}
</script>
</head><body">
<p id="bekezdes" style="color:red">
Akácosút, ha végigmegyek rajtad én ..</p>
<a href="javascript:Teszt()">Teszt</a>
</body></html>
|
setAttribute()Beállít egy bizonyos stílus tulajdonságot. A
következő paramétereket várja :
1. stílus megadás = a kérdéses stílus
neve
2. érték = az új érték, melyet át
akarunk neki adni
2. kis/NAGYbetű = true értéket
kell adni, ha azt akarjuk, hogy a stílus megadásban a
kis és Nagybetűt különböztesse meg , illetve false
ha ez érdektelen.
<html><head><title>Teszt</title>
<script language="JavaScript">
function Teszt(){
document.all.kiemel.style.setAttribute
("border","thin solid red","false");
}
</script>
</head><body">
<p id="kiemel">Piros, piros, piros háromszor is piros ..</p>
<a href="javascript:Teszt()">Teszt</a>
</body></html>
|
A példa egy kiemel nevű HTML elemet és egy hivatkozást tartalmaz. Ha kákattintunk a hivatkozásra, akkor a Teszt() függvény kerül meghívásra, mely hozzáfűzi a stílus megadáshoz a border -t. Értéket is adunk neki, mely : thin solid red. Ezáltal a szöveg egy vékony piros keretet kap.
Lengyel
Sándor
