Dynamisch <style> Tags, die Stile nicht auf Klassen anwenden

-1

Dies scheint einfach zu sein - aber es ist quälend frustrierend.Dynamisch <style> Tags, die Stile nicht auf Klassen anwenden

Ich habe eine Chat-Anwendung für ein Schulprojekt erstellt. Es ist .NET signalR und Jquery Spaghetti. Dies ist kein produktionsfertiger Code. Aber meine Nicht-Tech-Familie loggt sich gerne tagsüber ein, um sich gelegentlich zu unterhalten.

In letzter Zeit hat der Verkehr genug zugenommen, dass ich die Benutzernamen nach Farben unterscheiden möchte. Wenn ich also einen Benutzer zum chatHub hinzufüge, führe ich etwas wie diesen aus:

var color = randomColor({ luminosity: 'dark', count: 1 }); 
var className = "span.user-name.user" + id.split('-')[0]; 
$("<style type='text/css'>." + className + "{color:" + color + ";}</style>").appendTo("head");

Wie Sie sehen können, verwende ich extreme Spezifität. Und ich kann die tatsächliche <style> in meinem Chrom Inspector erscheinen.

Leider ist die Klasse scheint nicht das eigentliche Element zu beeinflussen. Hier ist das Element im Inspektor.

Ich bin nicht ganz sicher, was das Problem ist. Ich habe versucht, indem die folgenden Möglichkeiten:

zum <body> Hinzufügen anstelle des <head>.
Zunehmende Spezifität mehr und mehr.
Ändern im Inspektor.Stylesheet (funktioniert hier).
Sicherstellen, dass ich keine Klassen mit Nummern gestartet habe (CSS 2?)
Lauf durch CSS-Validatoren.

Ich habe keine Ideen, was ich sonst noch versuchen könnte. Ich würde es definitiv zu schätzen wissen, wenn ein Cass Ninja mir sagen könnte, was ich hier falsch gemacht habe.

P.S. Junge, das ist peinlich. Danke Leute!

Quelle

2016-08-04 atschaal

Die Art, wie Sie die CSS-Zeichenfolge erstellen, ist das Einfügen einer . vor span (was ein Tag ist, keine Klasse). Entfernen Sie das und alles sollte funktionieren:

var color = randomColor({ luminosity: 'dark', count: 1 }); 
var className = "span.user-name.user" + id.split('-')[0]; 
$("<style type='text/css'>" + className + "{color:" + color + ";}</style>").appendTo("head");

Quelle

2016-08-04 18:15:34

klassischer Fall von zu viel an anderer Stelle suchen. Lol, danke @Rob. – atschaal

PS, wird so schnell wie möglich antworten. – atschaal

Kleine Dinge wie diese sind immer da, um uns zu bekommen! :-) –

Haben Sie gerade .span tun? span ist keine Klasse, .

Quelle

2016-08-04 18:18:00 Poly

yep :(Danke Poly. Ich beschuldige nagelneues Baby. – atschaal

Sie haben ein nagelneues Baby?: D In diesem Fall lasse ich es gleiten: D – Poly

Entfernen Sie den Punkt vor classname den Punkt entfernen als span-Element nicht Klasse:

$("<style type='text/css'>" + className + "{color:" + color + ";}</style>").appendTo("head");

Quelle

2016-08-04 18:22:25

Dynamisch <style> Tags, die Stile nicht auf Klassen anwenden

Antwort

Verwandte Themen