10. juli 2002 - 11:07Der er
26 kommentarer og 2 løsninger
Hvordan får man et stylesheet til at få effekt i et javascript?
Jeg har et javascript (fremstillet via sothink), der genererer et sæt menu-knapper. Jeg vil gerne have, at et stylesheet, som jeg bruger til at gøre andre dele af dokumentet usynligt med, kan gøre disse knapper usynlige.
hvis du sætter top:100px; i et stylesheet er objekt.style.top == "" stadigvæk. man skal altså fra start bestemme sig for om man vil lave sit layout i stylesheets eller via javascripts. hvis man udvikler til NS4 har man ikke noget valg. der er kun CSS.
Det, der skrives ved hjælp af et javascript på websiden, kan godt kontrolleres af det generelle stylesheet. Så du skal vel bare finde ud af, hvilke tags dine menuknapper bruger - er det links, vil det f.eks. være hensigtsmæssigt at rette i javascriptet, så de har en særlig klasse, du kan manipulere på i stylesheetet
Klart nok. Jeg tror selv, jeg kan finde resten af vejen, så jeg giver Helle Fred de 50 point. Jeg lukker spørgsmålet nu. Også tak til "Mad dog" og "Master-d" for responsen.
Jeg kan ikke lukke spørgsmålet af tekniske grunde:
Helle Fred's svar var en "kommentar".
Men ved nærmere eftertanke, er jeg enig med "Maddog" i, at det kunne være rart med et konkret eksempel.
Spørgsmålet er altså ikke lukket helt endnu.
Jeg vil gerne af med de 50 point, men jeg foretrækker at se et kort konkret eksempel, baseret på en javascript-class som manipuleres af et stylesheet. Evt. i form af et link til et site.
Og af tekniske grunde... Marker "svar" over til venstre. :o)
Her er først et script, som genererer et menupunkt i form af et link. Menupunktet gives stylesheetklassen 'menupunkt', som bagefter defineres i et stylesheet. Det er altså ikke "en javascript-class, som manipuleres af et stylesheet"!
altså du kan fint ændre klassen dynamisk, hvis det er det vi fisker efter <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled - XHTML 1.0</title> <style type="text/css"> /* STYLESHEET */ .blue {background:blue;} .red {background:red;} </style> </head><body> <div class="blue" onclick="this.className='red';"> blå der bliver rød. tryk for sjov! </div> </body> </html>
du laver en klasse der hedder void .void [display:none;} i dit stylesheet. og kalder din div det her <div id="printfreemenu" class="hide"> og så tilføjer du til printikonet. <a href="" onclick="document.getElementById('printfreemenu').className='void';window.print();return false;"><img src="images/print_ikon.gif" width="20" height="16" align="absmiddle" border="0" class="hide"></a>
void [display:none;} --> void {display:none;} og selvfølgelig skal menuen vende tilbage onclick="document.getElementById('printfreemenu').className='void';window.print();document.getElementById('printfreemenu').className='hide';return false;"
- men det giver problemer, hvis du på nogle af dine sider har div-tags. Ellers må man ind i javascriptet, som ser pebret ud!, og tilføje en stylesheetklasse.
Maddog og Helle: I har begge givet nogle gode forslag. Jeg vil tillade mig, at vente til i morgen med at give de 50 point, for jeg er lidt i tvivl om hvilken ide, der er den bedste. Så jeg skal først lige køre nogle tests. :o)
du kan for min skyld dele de 50 points. husk at passe på hvilke styles der nedarves. du kan let komme i problemer. jeg formoder at lave en ny klasse er det sikreste (ingen styles overskrives) og nemmeste vedligeholde. At jeg har valgt display:none og at sætte klassen på den omkransende div skyldes at det er hammer meget lettere i mine øjne.
Maddog og Helle: Tak for jeres assistance. Jeg vælger at følge Maddog's råd og splitte pointene. I skal have mange tak for hjælpen. :o)
Hermed lukker jeg spørgsmålet.
/NimRod
Synes godt om
Ny brugerNybegynder
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.
