Avatar billede Max Novice
27. marts 2009 - 23:53 Der er 6 kommentarer og
1 løsning

Skift class på div

Hej igen.

Jeg prøver at skifte css klasse på et par div'er på min side, men det virker ikke. Så vidt jeg lige kan gennemskue, burde det virke, men .. tjah, det gør det altså ikke. Håber I kan se hvad der er galt og vil hjælpe mig.

Her er siden:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>FunnyDivs</title>
  <link rel="Stylesheet" href="Style.css" media="screen" type="text/css" />
</head>
<body>

  <script type="text/javascript">

function highlight(obj) {
  document.getElementById(obj).className = 'border_hover';
}

  </script>

  <form id="form1" runat="server">
  <div>
    <div id="div1" class="border_inactive small_box" onmouseover="highlight()">
    </div>
    <div id="div2" class="border_inactive small_box" onmouseover="highlight()">
    </div>
  </div>
  </form>
</body>
</html>


.. og mit stylesheet:

.border_inactive
{
    border: dotted 1px Gray;
}

.border_hover
{
    border: solid 1px Aqua;
}

.small_box
{
    width: 150px;
    height: 100px;
}

.large_box
{
    width: 200px;
    height: 300px;
}


Jeg har prøvet at kalde javascript funktionen med highlight(this), men har fjernet det igen, da getElementById(obj) skulle tage sig af den sag.. ikke?

Mvh.
Avatar billede erikjacobsen Ekspert
28. marts 2009 - 00:13 #1
Du skal vel kalde den med

  onmouseover="highlight('div1')"

Generelt er det bedre at ændre de konkrete elementer i stylen, end at skifte class - browseren tager noget længere om class-ændringen.
Avatar billede Max Novice
28. marts 2009 - 00:53 #2
Det var selvfølgelig det. Mente den kunne vinkles uden at tilføje id'et, men det kan man vel ikke.

Tak for hurtig hjælp. Smid et svar, så får du points. :)
Avatar billede roenving Novice
28. marts 2009 - 12:29 #3
Men hvorfor dog bede scriptet om at fedte rundt i DOM-træet for at finde objektet, når du kan sende en direkte reference ?-)

-- og så som erik skriver, er det meget bedre at skifte de relevante properties end at skifte klassenavn, da det tvinger browseren til at genberegne hele sidens rendering, hvis den er det mindste i tvivl om forhold omkring cascading (og det er de vist altid !-)

-- og ved at sætte klassen på den måde, overskriver du jo også klassen small_box, hvilket du vel ikke ønsker ...

F.eks.

<script type="text/javascript">

function highlight(obj) {
  obj.style.border = "solid 1px Aqua";
}

function downlight(obj) {
  obj.style.border = "";
}

  </script>

  <form id="form1" runat="server">
  <div>
    <div id="div1" class="border_inactive small_box" onmouseover="highlight(this);" onmouseout="downlight(this);">
    </div>
    <div id="div2" class="border_inactive small_box" onmouseover="highlight(this);" onmouseout="downlight(this);">
    </div>
  </div>
  </form>
</body>
</html>
Avatar billede Max Novice
01. april 2009 - 16:50 #4
Hej Roenvig.

Det var faktisk lige det jeg var ude efter. :)

Jeg har et spørgsmål mere, og det er så nært beslægtet, at jeg ikke vil oprette et nyt spm. med det. Hvis du kan svare skal jeg nok give dig points (skal lige lure hvordan man gør).

Spørgsmålet er:
Hvis jeg har div'er som følger:

<div id="div1a" class="u">
  <div id="div1b" class="i">
  </div>
</div>

<div id="div2a" class="u">
  <div id="div2b" class="i">
  </div>
</div>

Div1b og div2b har display:none (fra class "i"). Jeg vil gerne have det således, at en mouseover på henholdvis div1a og div2a sætter display til block på div1b og div2b respektivt.

Kan det lade sig gøre?

Mvh.
Avatar billede roenving Novice
02. april 2009 - 11:18 #5
F.eks.

<div id="div1a" class="u" onmouseover="visSkjul(this);"  onmouseout="visSkjul(this);">
  <div id="div1b" class="i">
  </div>
</div>

<div id="div2a" class="u" onmouseover="visSkjul(this);"  onmouseout="visSkjul(this);">
  <div id="div2b" class="i">
  </div>
</div>

java script:

var oldElm = null;
function visSkjul(elm){
  var div = elm.getElementsByTagName("div")[0].style;
  var vis = div.display != "block";
  if(oldElm)
    oldElm.display = "none";
  div.display = vis ? "block" : "none";
  oldElm = div;
}

-- els velbekomme '-)
Avatar billede Max Novice
03. april 2009 - 15:19 #6
Super!
Ingen slinger i valsen dér. Mange tak for hjælpen. Points kommer her.

Mvh.
Avatar billede roenving Novice
03. april 2009 - 21:22 #7
- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester