CSS-Klasse per JavaScript ansprechen?

Diskutiere mit über: CSS-Klasse per JavaScript ansprechen? im Web Page Design Forum

  1. Pixelprofi

    Pixelprofi Thread Starter MacUser Mitglied

    Beiträge:
    410
    Zustimmungen:
    1
    Registriert seit:
    08.11.2002
    Hallo,

    ich habe eine einfache Tabelle mit mehreren Zeilen und Spalten.
    Wenn man mit der Maus über eine Zeile fährt, soll sich die Hintergrundfarbe der gesamten Zeile ändern.
    Da ich die Farbangaben aber nicht in jede Zeile einzeln schreiben möchte, soll JavaScript eine CSS-Klasse ansprechen. In dieser Klasse könnte ich dann die Farbangabe global ändern.
    Weiß jemand von Euch Besserwissern ;) wie ich mit JavaScript die Klasse "over" und "out" ansprechen kann? Vielen Dank für Eure Hilfe?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .over {
    	background-color:#ff0000;
    }
    
    .out {
    	background-color:#ffffff;
    }
    </style>
    
    </head>
    
    <body>
    <table style="border-collapse:collapse">
    	<tr onmouseover="this.style.backgroundColor='ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    	</tr>
    	
    	<tr onmouseover="this.style.backgroundColor='ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    	</tr>
    	
    	<tr onmouseover="this.style.backgroundColor='ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    	</tr>
    </table>
    
    </body>
    </html>
    
     
  2. der_Kay

    der_Kay MacUser Mitglied

    Beiträge:
    1.693
    Zustimmungen:
    7
    Registriert seit:
    02.09.2004
    HTML:
    <tr onmouseover="this.className='over';" onmouseout="this.className='out'">
    Korrekt nach W3C DOM, aber keine Ahnung, welche Browser das unterstützen...
     
  3. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    Registriert seit:
    25.07.2004
    Warum nicht nur mit CSS machen?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    table tr:hover {
    	background-color:#ff0000;
    }
    
    </style>
    
    </head>
    
    <body>
    <table style="border-collapse:collapse">
    	<tr>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    	</tr>
    	
    	<tr>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    	</tr>
    	
    	<tr>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    	</tr>
    </table>
    
    </body>
    </html>
    
    
    Allerdings brauchst Du einen Javascript-Workaround für den IE v6, da der die Pseudoklasse :hover nur auf a-Selektoren unterstützt.

    Hier findest Du mehr dazu (Stichwort csshover.htc):

    defekter Link wurde von macuser.de entfernt
    http://www.hoeben.net/node/33
    http://www.hoeben.net/node/83
    http://www.xs4all.nl/~peterned/csshover.html

    [BESSERWISSER_MODUS]

    Übrigens lässt sich

    HTML:
    <td width="100px" style="border:1px solid black">Text</td>
    <td width="100px" style="border:1px solid black">Text</td>
    <td width="100px" style="border:1px solid black">Text</td>
    <td width="100px" style="border:1px solid black">Text</td>
    .
    .
    .
    undsoweiterundsofort
    .
    .
    .
    
    mit CSS via

    HTML:
    table td {
       width: 100px; 
       border: 1px solid black;
    }
    
    und

    HTML:
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    .
    .
    .
    undsoweiterundsofort
    .
    .
    .
    
    vereinfachen und abkürzen. Oder willst Du jedesmal 100 Zellen (oder so) manuell auf eine neue Breite anpassen?

    ;)

    [/BESSERWISSER_MODUS]


    2nd
     
    Zuletzt bearbeitet: 14.02.2007
  4. Pixelprofi

    Pixelprofi Thread Starter MacUser Mitglied

    Beiträge:
    410
    Zustimmungen:
    1
    Registriert seit:
    08.11.2002
    Hey Ihr beiden!

    Zunächst einmal danke für die Hilfe. :thumbsup:

    Das von Dir Kay schaut sehr gut aus. Jetzt teste ich mal, welche Browser damit etwas anfangen können.

    Der Tipp von 2ndreality klingt ebenfalls sehr gut. War bis eben fest der Meinung, dass ich hover nur auf a-Tags anwenden kann. Schaue mir dann auch gleich mal die Workarounds an.
    Deinen Vorschlag bzgl. der globalen Klassendefinition für table und td ist nett - und Standard :Pfeif: ;)

    Halte Euch auf dem Laufenden.

    Viele Grüße
    Pixelprofi
     
  5. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    Registriert seit:
    25.07.2004
    Gemäß der Spezifikation kann man :hover auf alle Selektoren anwenden - nur der IE v6 unterstützt das nicht, alle anderen modernen Browser schon (auch IE v7).

    Der Vorteil von der reinen CSS Variante ist der, dass man bei deaktiviertem JS trotzdem noch den Effekt hat - mit der Einschränkung vom Nichtfunktionieren im IE. Nimmt man die JS-Variante, geht es in keinem Browser mehr.

    Aber das ist nur meine Meinung...

    2nd
     
  6. Pixelprofi

    Pixelprofi Thread Starter MacUser Mitglied

    Beiträge:
    410
    Zustimmungen:
    1
    Registriert seit:
    08.11.2002
    Habe es mit CSS umgesetzt.
    Das Workaround funktioniert wunderbar.

    Nochmals vielen Dank an Euch beide :clap:

    Grüße
    Pixelprofi
     
Die Seite wird geladen...
Ähnliche Themen - CSS Klasse per Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
lokale css-Anweisung für macuser.de? Web Page Design 21.07.2015
Auslagerung von Klassen in CSS-File Web Page Design 02.04.2015
xml Ausgabe per PHP Web Page Design 17.05.2012
Bilder per FTP Hochladen und gleichzeitig online stellen Web Page Design 02.06.2011

Diese Seite empfehlen

Benutzerdefinierte Suche