CSS - Hinzufügen Farbe mit einem Datenattribut - attr (data-Farbe)

Ich versuche Farbe anderes Element mit einem Datenattribut in meinem css aber doensn't Arbeit hinzufügen ...CSS - Hinzufügen Farbe mit einem Datenattribut - attr (data-Farbe)

Ich folge diese Anweisungen:

The attr() Function: Properties Values Collected from the Edited Document.

W3C

HTML

<table> 
    <tr> 
     <td> 
      <span class="bgborder" data-color="#e7663f"></span> 
      <i class="fa fa-copy"></i> 
     </td> 
     <td> 
      <span>Blaablaaablaaa</span> 
     </td> 
    </tr> 
</table> 
<table> 
    <tr> 
     <td> 
      <span class="bgborder" data-color="#77c385"></span> 
      <i class="fa fa-upload fa-fw"></i> 
     </td> 
     <td> 
      <span>Blablaablaaa</span> 
     </td> 
    </tr> 
</table>

CSS

.bgborder { 
    display: block; 
    width: 5px; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    background-color: attr(data-color color); 
}

Nichts erscheint ... Habe ich recht?

In meinem Chrom Inspektoren Ich habe diese:

background-color: attr(data-color color); 
/!\ Invalid property value

Ich verstehe nicht, warum ... ???

Vielen Dank für Ihre Hilfe :)

Quelle

2014-12-17 Zagloo

immer eine gute Idee, die Dokumentation zu lesen: https://developer.mozilla.org/en/docs/Web/CSS/attr

screenshot of support table

Überraschung! Wenn nichts unterstützt, dann wird es nicht funktionieren;)

Alternative: Wenn Sie wissen, dass Sie nur eine begrenzte Anzahl von Farben haben, versuchen Sie:

[data-color=red] {background-color:red !important} 
[data-color=blue] {background-color:blue !important} 
[data-color=zophan-blue] {background-color:#33ccff !important}

Wie Sie sehen können, diese Flexibilität erlaubt es, solche wie definieren Sie Ihre eigenen Farben;)

Quelle

2014-12-17 15:47:50

s sehen *** ... es ist schlecht ... keine andere Möglichkeit, das zu tun? mit weniger ? (aber ohne jquery) – Zagloo

Du meinst anders als 'style =" background-color: # 123456; "'? –

@Zagloo: Mit Less können Sie Schleifen verwenden, um die Wiederholung von Code zu vermeiden, aber das kompilierte CSS müsste immer noch genauso sein wie oben erwähnt. – Harry

Derzeit kann die CSS attr Funktion nur mit der content Eigenschaft in Browsern

See here for compatibility

Pro die CSS2-Spezifikation verwendet werden:

Begrenzt auf die Inhaltseigenschaft

CSS3 wird erweitern diese (Vorschlag)

..can auf alle Eigenschaften verwendet werden; zurückkehren, andere Werte als <string>

Quelle

2014-12-17 15:47:00 SW4

Wenn Sie nur über Farben sprechen, können Sie CurrentColor-Wert als Proxy verwenden.

Zum Beispiel:

HTML

<td> 
    <span class="bgborder" style="color: #e7663f"></span> 
    <i class="fa fa-copy"></i> 
</td>

CSS

.bgborder { 
    background-color: currentColor; 
}

Quelle

2017-05-23 12:14:20 Treeskar

Ich denke, dass Sie suchen, ist CSS variables und Sie können bei Chrome, Firefox und Safari verwenden. Überprüfen Sie die Browser-Unterstützung bei Can I use

und kann mehr auf das Video von Lea Verou

Quelle

2017-09-04 20:43:53

CSS - Hinzufügen Farbe mit einem Datenattribut - attr (data-Farbe)

Antwort

Verwandte Themen