JavaScript-skolan JavaScript och CSS

1. Inledning

På den här sidan berättar jag lite om hur man kan använda JavaScript för att göra stilmallar (stylesheets, ibland även formatmallar). Grunderna i stilmallsspråket, CSS, kan du läsa om på särskilda sidor. Gå dit >

Jag vill passa på och säga att jag inte alltid tycker att det är så bra att använda JavaScript för att göra stilmallar. Den främsta anledningen till det är ju att CSS-språket är bättre på det än JavaScript. Koden är också enklare att skriva.

I de exempel jag visar här har jag försökt att hitta bra eller informativa användningsområden. Samtliga är också exempel på vad som brukar kallas Dhtml eller "Dynamisk Html. Jag har skrivit lite om det på en särskild sida. Läs mer >

Jag försöker nedan visa hur JavaScript kan användas för att öka kraften i stilmallsspråket, snarare än att göra samma sak fast krångligare.

2. JavaScript och CSS

Man kan säga att CSS ryms i JavaScript, eftersom i stort sett alla stilmallskoder har en motsvarighet i JavaScript. Det finns böcker och långa dokument om detta och jag tänker som sagt inte fördjupa mig oerhört i ämnet. Däremot kan vi titta på principerna:

Det hela följer alltså en viss logik, nämligen den att man i JavaScript tar bort streck och mellanrum och sätter ihop kommandot till ett enda ord, med liten begynnelsebokstav och stora bokstäver i början på varje efterföljande del.

Följande exempel visar skillnaden mellan de båda språkens syntax:

Oftast vill man dock ändra färger och liknande inne i ett script och då använder man i stället det vanliga scriptelementet. Det skall jag visa mer av i nästa avsnitt.

3. Ändra bakgrundsfärg

Man kan alltså ändra en textfärg med JavaScript. Detta var vanligare förr då webbläsarna inte kunde tolka stilmallskod särskilt bra.

Exempel 1

<form name="form1">
<input type="text" name="text1" value="Skriv in en f&auml;rg">
<input type="button" onClick="document.bgColor = document.form1.text1.value" value="&Auml;ndra f&auml;rg h&auml;r!">
</form>

Titta på exemplet i praktiken >

Här använder jag alltså ett enkelt script inne i formuläret. När man klickar på knappen ändras bakgrundsfärgen med bgColor, vars värde blir det värde man skrivit in i textrutan.

Man kan självklart också koppla denna typ av script till förvalda färger:

Exempel 2

<script language="JavaScript">
<!--
function FargRod() {
document.bgColor = "red";
}

function FargBla() {
document.bgColor = "blue";
}

function FargGron() {
document.bgColor = "green";
}
-->
</script>

+

<form name="form1">
<input type="button" onClick="FargRod()" value="Röd">
<input type="button" onClick="FargBla()" value="Blå">
<input type="button" onClick="FargGron()" value="Green">
</form>

Titta på exemplet i praktiken >

Här använder jag alltså ett enkelt script där bakgrundsfärgen ändras genom egenskapen bgColor.

4. Ändra textfärgen

Man kan självklart också påverka textfärgen på samma sätt. Här visar jag motsvarande exempel:

Exempel 3

<form name="form1">
<input type="text" name="text1" value="Skriv in en f&auml;rg">
<input type="button" onClick="document.fgColor = document.form1.text1.value" value="&Auml;ndra textf&auml;rgen h&auml;r!">
</form>

Titta på exemplet i praktiken >

fgColor står för "foreground color". Ibland fungerar det bättre att bara använda "color", som är stilmallskommandot:

Exempel 4

<form name="form1">
<input type="text" name="text1" value="Skriv in en f&auml;rg">
<input type="button" onClick="document.color = document.form1.text1.value" value="&Auml;ndra textf&auml;rgen h&auml;r!">
</form>

Titta på exemplet i praktiken >

Självklart kan man sedan ändra flera saker samtidigt. Man kombinerar då bara flera olika kommandon i samma funktion:

Exempel 5

<script language="JavaScript">
<!--
function SvartVitt() {
document.bgColor = "black";
document.fgColor = "white";
document.linkColor ="blue";
document.alinkColor ="aqua";
document.vlinkColor ="red";
}

function VittSvart() {
document.bgColor = "white";
document.fgColor = "black";
document.linkColor ="blue";
document.alinkColor ="aqua";
document.vlinkColor ="red";
}
-->
</script>

Titta på exemplet i praktiken >

Koden är ju inte speciellt komplicerad. Vill man däremot veta vilka koder som man kan använda måste man konsultera en manual.

5. Ändra färger dynamiskt

Egentligen är denna rubrik lite dum eftersom alla exempel ovan ändrat färgerna dynamiskt. men här tänkte jag visa ett litet exempel på hur man kan göra för att skapa många olika färger på samma sida, utan att behöva skapa en massa olika stilmallar eller funktioner:

Exempel 6

<script language="JavaScript">
<!--
function Farger(background,textCol,linkCol,alinkCol,vlinkCol) {
document.bgColor = background;
document.fgColor = textCol;
document.linkColor = linkCol;
document.alinkColor = alinkCol;
document.vlinkColor = vlinkCol;
}-->
</script>

+

onClick="Farger('black','red','orange','aqua','yellow')

Titta på exemplet i praktiken >

Funktionen innehåller alltså ett antal parametrar, som används för att sätta en slags värden eller platser för värden för dokumentobjektet.

Platserna fylls sedan med de färger man skriver in i onClick-attributet (eller annan händelsehanterare), t.ex för en knapp. Observera att man måste använda enkla citationstecken.

Se också till så att inga stilmallar är aktiverade. Knapparna måste också ha olika värden i value, annars krånglar scriptet.

Ett liknande exempel ser ut så här:

Exempel 7

<style type="text/css">
.tabellcell {
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: maroon;
}
</style>

+

<table>
<tr>
<td onMouseOver="bgColor='#CCCCFF'" onClick="window.location='../../../../startsidan.html'"
style="cursor:hand" onmouseout="bgColor='#FFFFFF'"
bgcolor="#FFFFFF" width="150" align="center" valign="center">
<b><font color="#333333">
<a href="../../../../startsidan.html" class="tabellcell">Startsidan</a>
</font></b>
</td>

<td width="1" align="center">|</td>

<td onMouseOver="bgColor='#CCCCFF'" onClick="window.location='../../../javascript.html'"
style="cursor:hand" onmouseout="bgColor='#FFFFFF'"
bgcolor="#FFFFFF" width="150" align="center" valign="center">
<b><font color="#333333">
<a href="../../../javascript.html" class="tabellcell">Index</a>
</font></b>
</td>

<td width="1" align="center">|</td>

<td onMouseOver="bgColor='#CCCCFF'" onClick="window.location='../../js_css.html'
style="cursor:hand" onmouseout="bgColor='#FFFFFF'"
bgcolor="#FFFFFF" width="150" align="center" valign="center">
<b><font color="#333333">
<a href="../../js_css.html" class="tabellcell">Tillbaka</a>
</font></b>
</td>

</tr>
</table>

Titta på exemplet i praktiken >

På sidan med exemplet hittar du även en förklaring av vad koden gör!

6. Rörlig text

Eftersom den här sidan handlar om JavaScript och CSS vill jag passa på och visa hur man kan använda en kombination av de två för att få en text att röra sig över skärmen.

Exempel 8

<script language="JavaScript">
<!--
function FlyttaText() {
if (Exempel8.style.pixelLeft < 400) {
Exempel8.style.pixelLeft += 2;
setTimeout("FlyttaText()", 20);
}
}
-->
</script>

+

<body onLoad="FlyttaText()">
<div id="Exempel8" style="position:absolute; left:65px; top:253px; background-color: #CCCC33; layer-background-color: #CCCC33; border: 1px solid #000000;">
&nbsp;Denna text r&ouml;r sig &aring;t h&ouml;ger!&nbsp;</div>

Titta på exemplet i praktiken >

Funktionen flyttar texten åt höger så länge den ligger inom 400 pixlar från kanten, räknat från den vänstraste pixeln. Egenskapen pixelLeft finns dock inte i alla webbläsare.

Det finns också andra egenskaper man kan använda, t.ex: pixelTop (flyttar texten uppifrån och ner). Man kan också kombinera kommandona:

Exempel 9

<script language="JavaScript">
<!--
function FlyttaText() {
if (Exempel9.style.pixelLeft < 400) {
Exempel9.style.pixelLeft += 2;
Exempel9.style.pixelTop += 2;
setTimeout("FlyttaText()", 20);
}
}
-->
</script>

+

<body onLoad="FlyttaText()">
<div id="Exempel9" style="position:absolute; left:7px; top:109px; background-color: #FF99CC; layer-background-color: #FF99CC; border: 1px none #000000;">&nbsp;Denna
text r&ouml;r sig ned&aring;t och &aring;t h&ouml;ger!&nbsp;</div>

Titta på exemplet i praktiken >

En viktig del av scriptet är metoden setTimeout. Enkelt uttryckt anger man med den att webbläsaren skall vänta 20 millisekunder mellan varje gång funktionen läses in. på det viset får man en mjuk rörelse mellan varje förflyttning av texten, jämförbar med bildrutorna i en film.

Ytterligare en sak att nämna är att jag lagt texten under de andra objekten på sidan. (Det syns dock inte i alla webbläsare.) Vill man kunna förflytta objekt över olika objekt brukar man använda sig av z-positionering, alltså att lägga objekten i olika lager. Det skall vi titta närmare på i nästa avsnitt.

7. Z-index

Termen z-index kunde du läsa om på sidan om stilmallar, "Positionering av boxar" och kapitlet om lagereffekter. Läs mer >

Ett av de exemplen jag visade var ungefär följande:

Exempel 10

<style type="text/css">
<!--
.PositioneradText {
position: absolute;
top: 200px;
left: 20px;
z-index: 2;
background: #FFCCCC;
font-size: 18px;
color: black;
}

.PositioneradBild {
position: absolute;
top: 190px;
left: 10px;
z-index: 1;
border: none;
}
-->
</style>

+

<div class="PositioneradText">Denna text ligger ovanpå bilden!</div>
<img class="PositioneradBild" src="bild.jpg" />

Titta på exemplet >

Texten lägger sig ovanpå bilden tack vare olika z-indexvärden.

Med JavaScript och z-index kan man också få fram effekter där ett objekt rör sig obehindrat över eller under de andra. Man kan visa detta genom att ändra placeringen dynamiskt.

Jag utgår ifrån exemplet ovan och lägger till ett kommando för rörelse:

Exempel 11

<style type="text/css">
<!--
.PositioneradText {
position: absolute;
top: 200px;
left: 20px;
z-index: 2;
background: #FFCCCC;
font-size: 18px;
color: black;
}

.PositioneradBild {
position: absolute;
top: 170px;
left: 10px;
z-index: 1;
border: none;
}
-->
</style>

<script language="JavaScript">
<!--
function FlyttaText() {
if (PositioneradText.style.pixelTop < 400) {
PositioneradText.style.pixelTop += 2;
setTimeout("FlyttaText()", 20);
}
}
function FlyttaBild() {
if (PositioneradBild.style.pixelTop < 400) {
PositioneradBild.style.pixelTop += 2;
setTimeout("FlyttaBild()", 20);
}
}
-->
</script>

+
<body onLoad="FlyttaText(),FlyttaBild()">
+
<div id="PositioneradText" class="PositioneradText">Denna text ligger fast positionerad <br> och ovanp&aring; bilden!</div>
<img id="PositioneradBild" class="PositioneradBild" src="bild.jpg"/>

Titta på exemplet i praktiken >

Som du ser stannar rörelsen då bilden och texten flyttats så att översta pixeln ligger 400 pixlar från övre kanten.

På min sida med surftips inom programmering hittar du gott om scriptbibliotek. Tänk bara på att scripten oftast inte fungerar i alla webbläsare, i synnerhet när man involverar CSS.

Jag har testat ett par hundra script för mina sidor och knappt tio visades i samtliga av mina webbläsare: Internet Explorer 6 för PC och 5.2 för Mac OS X, Netscape 6 för PC och Mac, safari för Mac OS X!

8. Övningar

Övning 1
Skapa ett script som gör att man kan skriva in vilken textfärg man vill använda på en sida med vit bakgrund. utgår ifrån Exempel 3 ovan.

Facit >

Övning 2
Gör ett script som ändrar bakgrundsfärgen till vit, blå eller svart då besökaren klickar på en knapp. Gör också så att man kan välja mellan textfärgerna röd, grön och svart med tre andra knappar.

Facit >

Övning 3
Utgå ifrån Exempel 5 och försök skapa knappar som styr tre olika färguppsättningar för din sida. Låt besökaren sedan kunna välja mellan dessa tre!

Facit >

Övning 4
Nästa uppgift är att skapa en rörelse. Du skall använda en valfri bild, t.ex den till höger, och få den att flytta sig snett nedåt höger på skärmen!

Facit >