So legen Sie einen dynamischen Eigenschaftsnamen in var() fest

Ich versuche, benutzerdefinierte Eigenschaften basierend auf dynamischen Werten wie attr() zu verwenden.So legen Sie einen dynamischen Eigenschaftsnamen in var() fest

Zum Beispiel, in der unteren Code, ich habe versucht, beide benutzerdefinierten Eigenschaften basierend auf dem aktuellen Element id Attribut zuzugreifen.

:root{ 
 
    --app-foo: 'Hello'; 
 
    --app-bar: 'World'; 
 
    } 
 
div::after{ 
 
/* expected : 
 
      'Hello' for #foo 
 
      'World' for #bar */ 
 
    content: var('--app-'attr(id)); 
 
    }

<div id="foo"></div> 
 
<div id="bar"></div>

Aber es nicht offensichtlich.

Gibt es einen Weg, dies zu erreichen?

Quelle

2017-12-08 Tygari

JS kann nicht CSS ändern. Sie können Stil ändern, aber nicht CSS – Rajesh

@Rajesh * JS kann nicht CSS ändern *. Bist du sicher? Was ist das? https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#DOM-CSS_CSSOM – zer00ne

Kaiido Ich benutze gerne das buttons id-Attribut, um den Namen der css-Variablen zu vervollständigen, um die richtige css-Variable zu erhalten, in die eingefügt werden soll der :: nach dem Inhalt der Schaltfläche. – Tygari

Das grammar lässt nicht zu, dass das erste Argument eines var()-Ausdrucks alles andere als ein einzelner benutzerdefinierter Eigenschaftsname ist, der fest codiert ist. Das bedeutet, dass Sie nicht auswählen können, welche benutzerdefinierte Eigenschaft in einem var()-Ausdruck mithilfe von CSS referenziert werden soll, da eine Zeichenfolge (oder ein attr()-Ausdruck, der eine Zeichenfolge zurückgibt) für einen Eigenschaftsnamen nicht akzeptiert wird. Sie müssen den Wert mit dem Ausdruck var() mit JS festlegen.

Quelle

2017-12-08 05:22:02 BoltClock

Eigentlich bin ich nicht sicher, ob das Problem wirklich die benutzerdefinierte Eigenschaft benennt und nicht die Unfähigkeit, Strings in 'var()' -Ausdrücken zu verwenden. – Kaiido

@Kaiido: Vielleicht sollte ich diese Antwort löschen und die Frage als unklar schließen. Es gibt eine Menge Code und kaum eine einfache englische Erklärung, so dass es schwierig ist, Kopf und Zahl von dem zu machen, was sie eigentlich machen wollen. (Aber was, wenn die Fragesteller haben Mühe geben, ihre Ziele in einfachem Englisch?) – BoltClock

Nein, ich glaube, du hast die Nähe, was sie wollen (was IMK unmöglich ist). Schauen Sie sich die letzten Schnipsel :, sie versuchten, ' '('var (' - 'attr (id))') ';' wie wenn es ''('var (- App-ID)')'' aber ihre Version wird tatsächlich äquivalent zu '' ('var (' - app-id ')') '' was ungültig ist. – Kaiido

So legen Sie einen dynamischen Eigenschaftsnamen in var() fest

Antwort

Verwandte Themen