Ich möchte die Farbe des tr-Elements ändern, wenn der Benutzer ein Textfeld darin auswählt. Die Fokus-Pseudo-Klasse arbeitet nicht damit. Kann dies ohne JavaScript erreicht werden?
html:
%Vor%CSS:
%Vor% Update1:
Sieht so aus, als gäbe es keine CSS-Methode. Was ist der einfachste Weg dies mit JavaScript zu tun?
Nein. Es gibt keinen Subjekt-Selektor in CSS3, aber in CSS4 wird es einen geben.
BEARBEITEN :
Eine reine JavaScript-Lösung könnte
sein %Vor% Dies wird jedoch in IE <7 nicht funktionieren, da Versons vor acht nicht wissen document.querySelectorAll ( Demonstration ). Wenn Sie eine problemlose Cross-Browser-Lösung benötigen, können Sie jQuery und den folgenden Code verwenden ( Demonstration ):
Vergessen Sie nicht, eine Klasse tr.highlight zu Ihrem CSS hinzuzufügen. Denken Sie daran, dass jQuery die Unterstützung alter Browser in zukünftigen Versionen ablehnt (siehe Browser-Unterstützung ), so dass Sie sie verwenden müssen jQuery 1.x für IE ≤8.
Es ist technisch möglich, ein tr -Element auf ausreichend neue Browser zu fokussieren, indem ein tabindex -Attribut darauf verwendet wird, z. <tr tabindex="1"> .
Allerdings ist die Methode der Fokussierung Browser-abhängig, und fokussierbare Tabellenzeilen können ein Albtraum der Benutzerfreundlichkeit sein. Beispielsweise wird sowohl auf IE als auch auf Firefox die Zeile fokussiert, wenn die TAB-Taste entsprechend verwendet wird, aber eine fokussierte Zeile nimmt keine Eingabe vor. Die Verwendung müsste TAB erneut drücken, um zu dem Eingabefeld zu gelangen. Auf Firefox, aber nicht auf IE, kann die Zeile auch durch Anklicken fokussiert werden, jedoch nicht durch Klicken auf das Eingabefeld (da sich dieses auf das Feld konzentrieren würde). Wenn Sie label markup verwenden, wie es für Benutzerfreundlichkeit und Zugänglichkeit empfohlen wird, z. B.
... wenn Sie dann auf die Beschriftung klicken, wird auf das Eingabefeld fokussiert (einer der Gründe für die Verwendung von label markup!), nicht auf das Zeilenelement.