Dynamisch Werte an CSS liefern

Ich versuche, die Farbe eines div dynamisch festzulegen.Dynamisch Werte an CSS liefern

einen Überblick über Problem zu geben, lassen Sie uns unten Dinge überprüfen:

<!doctype html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div class="shape" id="shape1"></div> 
    <div class="shape" id="shape2"></div> 
    <div class="shape" id="shape3"></div> 
</body> 
</html>

Unten ist die CSS Ich verwende:

.shape { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    background: #dfd; 
    margin: 20px; 
}

Ist es möglich, dass ich class="shape-fdd" in html es dann geben kann, zeige hellrote Farbe, wenn ich class="shape-dfd" gebe, dann zeigt es hellgrüne Farbe an?

Ich habe gerade in weniger für das gleiche untersucht, aber ich weiß nicht, ob es diese Funktion bieten kann.

Ich suche nicht nach jQuery-Lösungen dafür. Nur CSS oder mit WENIGER oder SASS wenn möglich.

Jede Hilfe wird geschätzt.

Quelle

2016-07-30 Ashish Joshi

warum nicht eine Klasse von roten und hellgrünen bereit haben und einfach hinzufügen oder entfernen diese Klasse je nach Situation? – guradio

Ich kann das tun, aber ich will nicht. –

Wenn Sie Ihre Frage aktualisieren könnten, die alle Klassen zeigt, über die Sie schreiben. Weder 'shape-fdd' noch' dfd' steht in Ihrer Frage, daher ist es sehr schwer zu verstehen, was Sie meinen. – LGSon

[Edited] da meine Antwort akzeptiert wurde: ich für spätere Leser nur hervorheben möchten, dass Folgendes wird jetzt nicht: dies in css3 noch nicht möglich ist (nur für Inhalte unterstützt richtigen Attribut jetzt)  :)

Nur eine kurze Notiz für Informationen. Es ist noch nicht möglich, in css3 (nur für Content-Attribut jetzt), aber vielleicht bald:

<!doctype html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div class="shape" id="shape1" data-color="#fdd"></div> 
    <div class="shape" id="shape2" data-color="#fdd"></div> 
    <div class="shape" id="shape3" data-color="#fdd"></div> 
</body> 
</html> 


.shape { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    background: attr(data-color); 
    margin: 20px; 
}

auf CSS - Add Color with a data attribute - attr(data-color color) überprüfen

Quelle

2016-07-30 07:39:49 antoni

Sie können eine neue Klasse auf Ihrem CSS erstellen und in Ihrem HTML verwenden.

.dfd { 
    background: #dfd; 
}

Dann class="shape dfd" die Farbe der .shape Klasse anzuwenden.

Hier ist eine funktionierende JsFiddle.

Quelle

2016-07-30 07:36:46

mit JQuery und zwei verschiedene Klasse, die Sie wie folgt

erreichen können HTML

<!doctype html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div class="shape-dfd" id="shape1"></div> 
    <div class="shape-dfd" id="shape2"></div> 
    <div class="shape-dfd" id="shape3"></div> 
    <input type="button" id="classDfd" value="Add dfd class" /> 
    <input type="button" id="classFdd" value="Add fdd class" /> 
</body> 
</html>

Stil

.shape-dfd { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    background: #dfd; 
    margin: 20px; 
} 
.shape-fdd { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    background: #fdd; 
    margin: 20px; 
} 
</style>

JQuery

<script> 
$(document).ready(function() { 

    $("#classDfd").click(function(){ 

     $("div[id^='shape']").removeClass("shape-fdd"); 
     $("div[id^='shape']").addClass("shape-dfd"); 
    }); 

    $("#classFdd").click(function(){ 

     $("div[id^='shape']").removeClass("shape-dfd"); 
     $("div[id^='shape']").addClass("shape-fdd"); 
    }); 
}); 
</script>

Quelle

2016-07-30 07:45:24

Je nachdem, wie Sie es einrichten würde dynamisch, JavaScript/jQuery? Ich würde damit beginnen. Setzen Sie die Farben in Datenattributen und spezifizieren Sie sie in Ihrem CSS, oder führen Sie einfache Klassen aus, je nach den Anforderungen des dynamischen Teils.

So etwas wie

[data-color="blue"] { 
    background-color: deepskyblue !important; 
} 

[data-color="red"] { 
    background-color: tomato !important; 
}

und Ihre HTML würde so aussehen

<div class="shape" data-color="blue"></div> 
<div class="shape" data-color="red"></div>

demo found at jsfiddle

EDIT Wenn ich habe Sie mit der rechten Sie dies wünschen. Du müsstest ein Mixin machen oder in SCSS erweitern (überprüfe die Syntax für LESS, jsfiddle only unterstützt SCSS, daher benutze ich es). Sie haben eine Klasse Base und dann, dass, sobald mit der Farbe zu erweitern, wie diese

.shape { 
     background-color: aqua; 
     display: inline-block; 
     height: 100px; 
     width: 100px; 
    } 

    .shape-blue { 
     @extend .shape; 
     background-color: deepskyblue; 
    } 

    .shape-red { 
     @extend .shape; 
     background-color: tomato; 
    }

demo on jsfiddle

Quelle

2016-07-30 07:54:17

Antwort

Verwandte Themen