Holen Sie sich den Wert des Attributs in CSS

Lesezeit: 3 Minuten

Ich habe diesen HTML-Code:

<div data-width="70"></div>

Ich möchte seine Breite in CSS gleich dem Wert des Data-Breite-Attributs setzen, zB so etwas:

div {
    width: [data-width];
}

Ich habe gesehen, dass das irgendwo gemacht wurde, aber ich kann mich nicht daran erinnern. Vielen Dank.

  • Sie können dies verwenden var width = 70px; dann im Code können Sie es als schreiben width: @width // asp.net web pages variable. Es wäre besser, den Stil im Kopf der Seite zu verwenden und nicht in einer separaten Datei.

    – Afzaal Ahmad Zeeshan

    18. August 2013 um 15:21 Uhr

  • Dies wurde als CSS3 vorgeschlagen attr() aber nicht umgesetzt. Es kann nicht mit CSS2 erreicht werden attr().

    – BoltClock

    18. August 2013 um 15:46 Uhr

Benutzer-Avatar
Amar Sila

Du brauchst das attr CSS-Funktion:

div {
    width: attr(data-width);
}

Das Problem ist, dass es (Stand 2021) nicht einmal von einigen der wichtigsten Browser (in meinem Fall Chrome) unterstützt wird:

Geben Sie hier die Bildbeschreibung ein

  • Aber das ist die richtige Antwort. @amar Sie könnten es als das richtige markieren, da Sie der Fragesteller waren.

    – Elboletaire

    18. Juni 2014 um 9:42 Uhr

  • so lautete die Antwort width: attr(data-width); 😉

    – svassr

    17. September 2014 um 19:13 Uhr

  • außer dass es nicht funktioniert, 2021 in Firefox: jsbin.com/magiweteno/edit?html,css,Ausgabe

    – br4nnigan

    12. Mai 2021 um 15:11 Uhr

Sie können den Datenattributwert ohne Pseudotypinhalt nicht direkt an CSS übergeben. Eher kannst du es so machen.. ÜBERPRÜFEN SIE DIESE GEIGE

<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>

CSS

div[data-width="a"] {
    background-color: gray;
    height: 10px;
    width:70px;
}
div[data-width="b"] {
    background-color: gray;
    height: 10px;
    width:80px;
}
div[data-width="c"] {
    background-color: gray;
    height: 10px;
    width:90px;
}

  • Ich kann es passieren, ich habe es schon einmal gesehen.

    – Amar Syla

    18. August 2013 um 16:49 Uhr

In der Reihe CSS-Variablen sind fast so aussagekräftig wie Datenattribute, und das sind sie breit unterstützt jetzt, im Gegensatz zu den attr(). Sieh dir das an:

var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
  jsVar = jsVar % 5 + 1; // loop 1..5
  elem.style.setProperty("--my-var", jsVar);
}
.d1 {
  width: calc( var(--my-var) * 100px );
  background-color: orange;
}
.d2 {
  column-count: var(--my-var);
}
<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
  <div class="d1">CustomWidth</div>
  <div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>

Benutzer-Avatar
ozgrozer

Ein anderer Ansatz wäre die Verwendung Benutzerdefinierte CSS-Eigenschaften mit style-Element, um Werte von HTML an CSS zu übergeben.

div {
  width: var(--width);
  height: var(--height);
  background-color: var(--backgroundColor);
}
<div
  style="
    --width: 50px;
    --height: 25px;
    --backgroundColor: #ccc;
  "
></div>

<div
  style="
    --width: 100px;
    --height: 50px;
    --backgroundColor: #aaa;
  "
></div>

Benutzer-Avatar
Joren

CSS sind statische Stilinformationen über bestimmte HTML-Elemente und nicht umgekehrt. Wenn Sie CSS verwenden möchten, um die Breite Ihres div festzulegen, schlage ich vor, dass Sie dies mit der Verwendung von Klassen tun:

HTML:

<div class="foo"></div>

CSS:

.foo {
    width: 70px;
}

jsFiddle

Ich habe nur Spaß damit, aber eine jQuery-Lösung wäre etwa so:

HTML

<div class="foo" data-width="70"></div>
<div class="foo" data-width="110"></div>
<div class="foo" data-width="300"></div>
<div class="foo" data-width="200"></div>

CSS

.foo {
  background: red;
  height: 20px;
  margin-bottom: 10px;
  width: 0; /** defaults to zero **/
}

jQuery

$(document).ready(function(){
  $('.foo').each(function(i) {
    var width = $(this).data('width');
    $(this).width(width);
  });
});

Codepen-Skizze hier: http://cdpn.io/otdqB


EINE ART EINES UPDATES
Nicht das, wonach Sie suchen, da Sie eine Variable an die width-Eigenschaft übergeben möchten. Sie können in diesem Fall genauso gut eine Klasse verwenden.

HTML

<div data-width="70">Blue</div>

CSS

div[data-width="70"] {
  width: 70px;
}

Skizze hier: http://cdpn.io/jKDcH

Benutzer-Avatar
emre

<div data-width="70"></div>

Verwenden Sie `attr()`, um den Wert des Attributs zu erhalten;

div {
    width: attr(data-width);
}

  • Dies wird als String übergeben und funktioniert nicht.

    – ublec

    5. Juni 2021 um 19:58 Uhr

1256680cookie-checkHolen Sie sich den Wert des Attributs in CSS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy