CSS-JavaScript integrering

=maddog=Eksperten 08/08-2002:

specs for CSS siger at properties hvori der indgår flere ord samles med bindestreg, og midlertidige properties starter med bindestreg (hyphen). f.x.

scollbar-arrow-color
-moz-opacity
dette hyphen kan ikke optræde i JS, men istedet lader man det efterfølgende ord starte med stort.
oObject.style.scrollbarArrowColor
oObject.style.MozOpacity (BEMÆRK!!! M med stort)
hvis du skal sætte blot en enkelt style kan du altså bare skrive
onmouseover="this.style.scrollbarArrowColor='black';"

mht. className [der gør det muligt at aktivere CSS klasser i en javascript kommando, f.eks.: onmouseover="this.className='CSSklassenavn';"]. Ved ikke med NS [men det ved jeg: className understøttes af NS6, men vist ikke af NS4.x] men regner ikke med NS4. IE har className så langt tilbage som IE4.

Se: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/classname.asp

Og det er ikke bare smart. Det er RIGTIG smart, da man kan holde JS for sig og CSS for sig og derved have en realistisk chance for vedligeholde sit design. (sæt nu man ville ændre farve skemaet på siden og skulle ind og fedte i en masse scripts for at finde ud af hvor f**den man nu havde sat i tåbelige scrollbar farver).

HTML: Datastruktur
JavaScript: Datakontrol
CSS: Layout
Ikke noget misk-mask.

Så vidt for =maddog=

Her er et par simple eksempler:

Eks.1
<span onmouseover="this.style.backgroundColor='#9cf'"
onmouseout="this.style.backgroundColor='white'">blabla</span>

Eks.2 <style type="text/css"> .over { background-color: #0cf; color: #33f; } .out { background-color: white; color: black; } </style> <span onmouseover="this.className='over'" onmouseout="this.className='out'">blabla</span>

- som ser sådan ud (kør musen over "blabla"):

Eks.1:  blabla

Eks.2.  blabla

Af disse metoder er den første at foretrække. For som roenving siger på Eksperten, 14/02-2004 01:01:52:

-- men det er dumt at skifte class on-the-fly, for browseren er nødt til at genberegne hele sit css DOM-træ, når du bare ændrer klasse på eet element ...

-- og selv M$ fraråder på det kraftigste, at man bruger den taktik, og anbefaler alternativet: at ændre den eller de (som regel få !-) properties i stedet ...

Eksemplet er heller ikke længere end selve klassen:

<script type="text/javascript">
function mOver(elm){
elm.style.backgroundColor = "red";
}
function mOut(elm){
elm.style.backgroundColor = "white";
}
</script>

<tr class="menu" onmouseover="mOver(this);" onmouseout="mOut(this);">

En udvidelse af dette der gør det muligt at skifte med mange egenskaber på én gang (som hvis der var tale om en regulær CSS klasse), giver olebole eksempel på i slutningen af denne artikel. Med denne metode vil koden til eksempel 2 oven for se sådan ud:

<script type="text/javascript">
var over = {"backgroundColor":"#0cf", "color":"#33f"};
var out = {"backgroundColor":"white", "color":"black"};

function setStyle(elm,so){ // "so" står her for "style object", nemlig de to oven for.
  for (x in so) elm.style[x] = so[x];
}
</script>

<span onmouseover="setStyle(this,over)" onmouseout="setStyle(this,out)">blabla</span>

Det betyder naturligvis ikke at man ikke kan have sin default style defineret som klasse i stylesheetet, men at ændringer i forhold til CSS stylesheetet sker ved at blot at ændre egenskaber med JavaScript.