webForumDet fria alternativet

Hur återställer man bakgrundsfärg på ett vettigt sätt?

JavaScript

8 svar · 672 visningar · startad av aasah

Medlem sedan mars 20034 471 inlägg
Frågan#1

Jag har ett korsord där de "vita" rutorna definieras mha :

#cw td.vit {
  background:url(...vitRuta.gif); //Är genomskinlig
  background-color:#ffffff;
  //...
}

//För speciella bokstäver som ingår i ett specialord som ej kommer i följd
#cw td.mark {
  background:url(....vitRuta.gif);
  background-color:#33ff66;  
  //...
}

För att man ska kunna se var i korsordet man tryckt (för att skriva in ett ord) blir aktuellt ord blåfärgat mha JavaScript på följande vis:

function bgColMarker(box, isCurrPos) {
   if (isCurrPos) // The clicked pos
      box.style.backgroundColor = '#3366ff';
   else box.style.backgroundColor = '#33ccff';
}

Då uppstår frågan hur man på enklaste vis backar tillbaka till ursprunglig bakgrundsfärg? I 95% av alla fall är denna #ffffff men inte för de specialfärgade rutorna. Kan man via JavaScript se vad CSS tycker att färgen borde vara enligt den class fältet har, eller måste man lagra undan infon om befintlig bakgrundsfärg innan den sätts om till blå?

Medlem sedan juni 20008 205 inlägg
#2

box.style.backgroundColor = null; funkar i FF, kanske funkar det i andra webbläsare också (inte helt ologiskt - finns det ingen information om vilken bakgrund objektet ska ha, borde den ju rimligen använda defaultfärgen).

Medlem sedan mars 20034 471 inlägg
#3

Prövade precis och tyvärr vill inte IE kännas vid den metoden. Den vägrar frankt att sätta om färgen alls då.

Några idéer om vad man gör i IE?

Medlem sedan mars 20034 471 inlägg
#4

OK, för att det ska funka i både FF och IE har jag bestämt mig för att lagra informationen i en array. Men det vore ju bra att inte behöva lagra infon mer än för de rutor det gäller. Om jag skriver följande:

annorlunda = new array();
annorlunda['F6'] = true;
annorlunda['B3']= true;

Hur kollar man då om annorlunda är satt för en godtycklig ruta? Funkar:

if (annorlunda[pos])

om pos är A1 (och alltså har vit färg)? Eller blir det ett indexeringsfel då?

Medlem sedan dec. 20025 483 inlägg
#5

Du får ett undefined om nyckeln ej existerar, så if-satsen fungerar.

Medlem sedan dec. 20025 483 inlägg
#6

Det du annars kan göra, är att låta föräldern ha samma CSS-klass och sedan sätta bakgrunden på barnet till transparent. Exempel:

<style>
.a { background-color:#33ff66; }
</style>
<div class="a">
  <div id="a" class="a" onclick="this.style.backgroundColor='#3366ff'">click me first!</div>
</div>
<script>
function f(){ document.getElementById("a").style.backgroundColor = "transparent"; }
</script>
<a href="javascript:void f()">...then click me!</a>
Medlem sedan mars 20034 471 inlägg
#7

Peter S skrev:

Det du annars kan göra, är att låta föräldern ha samma CSS-klass och sedan sätta bakgrunden på barnet till transparent.

:q :q :q Jag förstår inte riktigt hur detta kan tillämpas i mitt fall. Jag har alltså ett korsord där merparten av alla rutor man kan skriva i är vita. (I vissa korsord är alla sådana rutor vita.) Vissa få undantag ingår i ett bonusord som kan lösas ut bokstav för bokstav, dessa har annan färg. Detta är normaltillståndet för korsordet. Men när man markerar att man vill fylla i ett visst ord blir hela det order blått, för att man tydligt ska se var man är i korsordet. Så långt är allt väl. Men sedan flyttar man intresset någon annanstans i korsordet och då ska det ord som nyss var blått återfå de(n) färg(er) det hade innan. Om hela ordet består av vita rutor är det lätt, men om vissa rutor hade annan färg, måste ju de få tillbaka sin avvikande färg.

Hur går det ihop med ditt exempel? Vad är förälder och barn? Och hur får jag in tre färger?

Medlem sedan dec. 20042 245 inlägg
#8

Använd klasser. Ett element kan ha flera klasser (skilda från varandra med whitespace). I JS använder du tex box.className = "mark";

Medlem sedan mars 20034 471 inlägg
#9

Jag har löst det med vektor.

Även zcorpans förslag leder till problem så vitt jag förstår för problemet är inte att sätta om färgen, utan att veta vilken klass (i det fallet) jag kommer ifrån från start. Dessutom kan varje ruta ha mer än en klass vilket komplicerar det hela ytterligare.

3265 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
180 ms — deklarationer (db)
0 ms — hämta statistik (cache)
3078 ms — hämta tråd, inlägg och bilagor (db)
181 ms — ändringar (db)