Objektum és jelölőelem egyedi stílusa 1814
Jelölőelem (id)keresése getElementById("...") függvénnyel
Ha egy elemet ellátunk egyedi id azonosítóval, akkor a getElementById("...") függvénnyel megkereshetjük.
A zárójelek közé írjuk be, az elemnek adott, id egyedi azonosító nevet.
<h2> Program ismertetése </h2>
- A JavaSript programjainkat lehetőleg, külön js fájlban helyezzük el, azaz ott írjuk meg!
- A JavaScript programok meghívását, a head szakaszban helyezzük el!
<script language="JavaScript" type="text/javascript" src="hatterszin.js"> </script>
<script language="JavaScript" type="text/javascript" src="keretszin.js"> </script>
<script language="JavaScript" type="text/javascript" src="betuszin.js"> </script>
<script language="JavaScript" type="text/javascript" src="betumeret_szin.js"> </script>
A dokumentum további része, úgy lett elkészítve, hogy:
- Kijelölhető másolásra, azaz bárki átmásolhatja a saját html oldalára, és rögtön tesztelheti a program működését.
- Minden jelölőelem kezdő címkéje, egyedi id azonosítóval rendelkezik. Melyet, mindenki tetszésének megfelelően átírhat, más elnevezésre.
- Teszteléshez, a kiválasztott jelölőelem id azonosítóját kell, a JavaScript programba beírni
<h2 id="h2cimsor1"> címsor szövege </h2>
<p id="p1">Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<p id="p2">Új bekezdés<span id="span1"> Szöveg kiemelése</span> xxxxxxx xxxx </p>
<p id="p3">Új bekezdés<strong id="strog1"> Vastag betűk</strong> xxxxxxx xxxx </p>
<p id="p4">Új bekezdés <em id="em1"> Dőlt betűk </em> xxxxx xxxxxx </p>
<cite id="cite1"> x xxx xxxx xxxxx xx </cite><pre id="pre1"> x xxx xx x </pre>
<dfn id="dfn1">Új bekezdés xxxxxx xxxxxxxxx </dfn>
<p id="p5">Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
</div> Záró div jelölőelem
<h3 id="h3cimsor1" class="sargah"> h3 - Szöveg </h3>
<h4 id="h4cimsor1" class="keret">h4 - címsor szövege </h4>
<h5 id="h5cimsor1" class="kek">h5 - címsor szövege </h5>
Ahhoz, hogy a weblapunk dokumentuma ne ugráljon le és fel, azon részt, mely betűméret változással jár, helyezzük el agy div szakaszban, ahol a div szakasz magasságának (height) helyes beállításával megakadályozhatjuk, a weblap további részeinek elmozdulását.
Példa a CSS, azaz stílus meghatározásra:
#div1 {width: 800px; height: 80px; border: 1px solid black; text-align: center;}
<h5 id="betuszinmeret1">h5 - betűméret és szín <h5>
A következő példa, annyival különbözik az előző példától, hogy a div szakasz keretszínének, a weboldal háttérszínét adtuk meg. Így a div szakasz kerete (border) ugyan létezik, de mivel színe megegyezik a weboldal háttérszínével, a monitort néző személy előtt nem lesz látható.
Ezen trükk alkalmazásakor, a div szakasz magasságát is kisebbre vehetjük, mert nem lesz látható, hogy a szövegrész kiugrik a keretből!
Példa a CSS, azaz stílus meghatározásra:
#div2 {width: 800px; height: 30px; border: 1px solid #ccc; text-align: center;}
<h5 id="betuszinmeret2">h5 - betűméret és szín <h5>
A fenti bemutetók programjának megírása
<p> <strong> JavaSript programok megírása </strong> </p>
Háttérszín js programja.
<p>A ( background ) style, azaz stílus meghatározásokat, mindenki tetszésének megfelelően írja át </p>
<script language="JavaScript" type="text/javascript">
// Az adott jelölőelem háttérszínének váltogatása
// Az adott jelölőelemnek előzetesen CSS fájlban, meghatározzuk a háttérszínét. Példa ( .hatter {background-color: yellow;} )
// A jelölőelem id azonosítóját írjuk be, getElementById("....") zárójelei közé.
// Késleltetési idő=1000
var sebesseg=1000
function Hatterszin()
{ var idelem=document.getElementById? document.getElementById("h3cimsor1") :
document.all? document.all.h3cimsor1: ""
if (idelem)
{ if (idelem.style.backgroundColor.indexOf("aqua")!=-1)
idelem.style.backgroundColor="yellow"
else
idelem.style.backgroundColor="aqua"
}
}
setInterval("Hatterszin()", sebesseg)
</script>
Keretszín js programja.
<p>A keret (border) style, azaz stílus meghatározásokat, mindenki tetszésének megfelelően írja át </p>
<script language="JavaScript" type="text/javascript">
// Az adott jelölőelem keretszínének váltogatása
// Az adott jelölőelemnek előzetesen CSS fájlban, meghatározzuk a keret színét, vastagságát
// és megjelenési formáját. Példa ( .keret { border: 2px solid black;} )
// A jelölőelem id azonosítóját írjuk be, getElementById("....") zárójelei közé.
// Késleltetési idő=1200
var sebesseg=1200
function Keretszin()
{ var idelem=document.getElementById? document.getElementById("h4cimsor1"):" "
if (idelem)
{ if (idelem.style.borderColor.indexOf("blue")!=-1)
idelem.style.borderColor="yellow"
else
idelem.style.borderColor="blue"
}
}
setInterval("Keretszin()", sebesseg)
</script>
Betűszín js programja.
<p>A betű (color) style, azaz stílus meghatározásokat, mindenki tetszésének megfelelően írja át </p>
<script language="JavaScript" type="text/javascript">
// Az adott jelölőelem betűszínének váltogatása
// Az adott jelölőelemnek előzetesen CSS fájlban, meghatározzuk a betűszínét.
// A jelölőelem id azonosítóját írjuk be, getElementById("....") zárójelei közé.
// Késleltetési idő=800
var sebesseg=800
function Betuszin()
{var idelem = document.getElementById ? document.getElementById("h5cimsor1") :
document.all ? document.all.h5cimsor1: " "
if (idelem)
{ if (idelem.style.color.indexOf("blue")!=-1)
idelem.style.color="yellow";
else
idelem.style.color="blue";
}
}
setInterval("Betuszin()", sebesseg)
</script>
Betűméret és betűszín js programja.
<p>A betű (fontSize és color) style, azaz stílus meghatározásokat, mindenki tetszésének megfelelően írja át </p>
<script language="JavaScript" type="text/javascript">
//Első példa, mikor a div szakasz kerete, látható
// Az adott jelölőelem betűméretének és betűszínének váltogatása
// Az adott jelölőelemnek előzetesen CSS fájlban, meghatározzuk a betűméretét és betűszínét.
// A jelölőelem id azonosítóját írjuk be, getElementById("....") zárójelei közé.
// Késleltetési idő=800
var sebesseg=800
function Betuszinmeret()
{var idelem = document.getElementById ? document.getElementById("betuszinmeret1") :
document.all ? document.all.betuszinmeret1: " "
if (idelem)
{ if (idelem.style.color.indexOf("black")!=-1)
{ idelem.style.fontSize="20px" ; idelem.style.color="yellow" }
else
{ idelem.style.fontSize="25px" ; idelem.style.color="black" }
}
}
setInterval("Betuszinmeret()", sebesseg)
//Második példa, mikor a div szakasz kerete, nem látható
// Késleltetési idő=1000
var sebesseg=1000
function Betuszinmeret2()
{var idelem = document.getElementById ? document.getElementById("betuszinmeret2") :
document.all ? document.all.betuszinmeret2: " "
if (idelem)
{ if (idelem.style.color.indexOf("black")!=-1)
{ idelem.style.fontSize="20px" ; idelem.style.color="yellow" }
else
{ idelem.style.fontSize="25px" ; idelem.style.color="black" }
}
}
setInterval("Betuszinmeret2()", sebesseg)
</script>
A betűszín meghatározásnál kisbetűvel írjuk a betűszínt: color
A következő meghatározásoknál, nagybetűvel írjuk: Size, Color, Top, Right, Bottom, Left !
Helyesen írva:
- backgroundColor
- fontSize
- marginTop
- marginRight
- marginBottom
- marginLeft
- paddingTop
- paddingRight
- paddingBottom
- paddingLeft
- borderTop
- borderRight
- borderBottom
- borderLeft