CSS-Werte mit HTML5-Datenattribut [duplicate]

Lesezeit: 3 Minuten

CSS Werte mit HTML5 Datenattribut duplicate
James Kyle

width: attr(data-width);

Ich möchte wissen, ob es möglich ist, einen CSS-Wert mit HTML5 festzulegen data- Attribut auf die gleiche Weise, wie Sie css festlegen können content. Aktuell geht es nicht.


HTML

<div data-width="600px"></div>

CSS

div { width: attr(data-width) }

  • AFAIK Sie können nicht nur CSS verwenden. Es ist jedoch mit Javascript möglich.

    – David Hellsing

    1. März 12 um 20:07 Uhr

  • Semantisch ist dies eine schlechte Idee, da es die Trennung von Markup und Layout aufhebt.

    – Diodeus – James MacFarlane

    1. März 12 um 20:08 Uhr

  • Sie müssen ein besseres Beispiel finden, da die Lösung für Ihr obiges Problem darin besteht,

    anstelle von

    zu verwenden. Im Moment kann ich mir nur vorstellen, dass Ihre Frage in Bezug auf Attributselektoren interessant ist: css-tricks.com/attribute-selectors

    – T. Junghans

    1. März 12 um 20:14 Uhr

  • Das gleiche Problem hatte ich auch. Ich mache einige Übergangs- und Animationsarbeiten. Die data-*-Attribute können verwendet werden, um die anfänglichen Eigenschaften eines Elements zu speichern. Ich dachte, ich könnte mit CSS auf diese gespeicherten Werte zugreifen, aber es scheint, dass dies nur mit JS möglich ist.

    – Vennsoh

    30. Januar 13 um 3:27 Uhr

  • Ja, und es hieß HTML 1.0. Jahre später fanden die Leute heraus, dass das Mischen von Dokumentstruktur und Präsentation eine schlechte Idee war, und trennten sie in zwei Teile: HTML und CSS. Es ist nicht allzu schwer vorstellbar, dass es eine schlechte Idee ist, sie erneut zu kombinieren.

    – Sedat Kapanoglu

    5. August 13 um 18:38 Uhr

1644073985 736 CSS Werte mit HTML5 Datenattribut duplicate
Caio Cunha

Es gibt tatsächlich eine Vorkehrung für ein solches Feature, Aussehen http://www.w3.org/TR/css3-values/#attr-notation

Dies Geige sollte so funktionieren, wie Sie es brauchen, wird es aber vorerst nicht.

Leider ist es noch ein Entwurf und nicht vollständig in den gängigen Browsern implementiert.

Es funktioniert für content auf Pseudo-Elemente, obwohl.

  • ist diese CSS-Syntax content: attr(data-content); Cross-Browser? funktioniert es bis IE8?

    – Axel

    22. Juni 15 um 11:37 Uhr

  • Update – Dies ist jetzt eine nutzbare Funktion in Browsern.

    – Kapitän Hypertext

    16. November 16 um 15:28 Uhr

  • @CaptainHypertext Laut caniuse.com, wird die Funktion immer noch weitgehend nicht unterstützt (mit Ausnahme von Zeichenfolgen im Inhaltsattribut von Pseudoelementen). caniuse.com/#feat=css3-attr

    – ne1410s

    25. November 16 um 8:58 Uhr

  • @Zeus Zdravkov: Was ist das für eine Logik? Das Ganze Punkt dieser Antwort ist, dass der Code nicht funktioniert – weil er überhaupt nicht unterstützt wird. Wie ist das die Schuld der Antwort?

    – BoltClock

    3. Oktober 17 um 18:35 Uhr

1644073985 578 CSS Werte mit HTML5 Datenattribut duplicate
yckart

Sie können mit Javascript einige CSS-rules, die Sie später in Ihren Stilen verwenden können: http://jsfiddle.net/ARTsinn/vKbda/

var addRule = (function (sheet) {
    if(!sheet) return;
    return function (selector, styles) {
        if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        if (sheet.addRule) return sheet.addRule(selector, styles);
    }
}(document.styleSheets[document.styleSheets.length - 1]));

var i = 101;
while (i--) {
    addRule("[data-width="" + i + "%"]", "width:" + i + "%");
}

Dadurch werden 100 Pseudo-Selektoren wie folgt erstellt:

[data-width="1%"] { width: 1%; }
[data-width="2%"] { width: 2%; }
[data-width="3%"] { width: 3%; }
...
[data-width="100%"] { width: 100%; }

Hinweis: Dies ist ein bisschen offtopic und nicht wirklich das, was Sie (oder jemand anderes) will, aber vielleicht hilfreich.

  • Nicht erfasster Typfehler: Eigenschaft „Länge“ von null bei main.js:1172 bei main.js:1179 (anonym) @ main.js:1172 (anonym) @ main.js:1179 09:02:48.363 kann nicht gelesen werden

    – nicht definiert

    27. August 17 um 6:05 Uhr

1644073986 137 CSS Werte mit HTML5 Datenattribut duplicate
Benny Neugebauer

Ab heute können Sie einige Werte von HTML5 ablesen data Attribute in CSS3-Deklarationen. In CaioToOns Geige Der CSS-Code kann die verwenden data Eigenschaften zum Festlegen der content.

Leider funktioniert es nicht für die width und height (getestet in Google Chrome 35, Mozilla Firefox 30 und Internet Explorer 11).

Aber es gibt eine CSS3 attr() Polyfill von Fabrice Weinberg, die Unterstützung bietet für data-width und data-height. Das GitHub-Repo dazu finden Sie hier: cssattr.js.

.

784650cookie-checkCSS-Werte mit HTML5-Datenattribut [duplicate]

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

Privacy policy