Wie Parameter CSS-Klassen passieren

Question

ich wissen will, ist es möglich, eine gewisse Flexibilität zu CSS über diese hinzufügen:

<div class='round5'></div> 

wo .round eine Klasse mit runden Ecken und ‚5‘ bestimmt die Höhe des Radius . Ist es möglich? Ich habe einige wo gesehen, aber ich weiß nicht, wie die Implementierung stattfindet.

Answer 1

Sie können den Grenzradius nicht getrennt von seinem Wert definieren, da es sich um eine einzige Eigenschaft handelt. Es gibt keine Möglichkeit, einem Element zu sagen, abgerundete Ecken "im Allgemeinen" zu haben, ohne auch anzugeben, um wie viel sie abgerundet werden sollen.

Sie können jedoch etwas Art von ähnlich mit mehreren Klassen und unterschiedlichen Eigenschaften tun:

HTML:

<div class="rounded blue"></div> 
<div class="rounded green"></div> 

CSS:

.rounded { 
    border-radius: 5px; 
} 
.blue { 
    background: blue; 
} 
.green { 
    background: green; 
} 

Die .rounded Klasse fügt den Grenzradius und Die Klassen .blue und .green fügen die Hintergrundfarbe hinzu.

(Ich mag die Klassen so nennen und ordnen, dass sie logisch lesen, wie <div class="large box"></div>, etc.).

Answer 2

Sie könnten etwas ähnliches tun, aber nicht so, wie Sie es formuliert haben.

CSS

.radius{ 
    border-radius: 10px; 
    border: 1px solid red; 
} 

.r5{ 
    border-radius:5px; 
} 

HTML

<div class="radius">Hello World</div> 
<br/> 
<div class="radius r5">Hello World</div> 

Working Example

Im Beispiel oben die rote Grenze, aber der border-radius ändern wird beibehalten wird.

Beachten Sie, dass Sie keine Klassennamen mit Zahlen beginnen, damit r5 statt 5

Answer 3

Sie Klassenkombinationen auf dem Element verwenden können. ZB .:

HTML:

<div class="round">Box without border radius</div> 
<div class="round rounded-5">Box with 5px border radius</div> 
<div class="round rounded-10">Box with 10px border radius</div> 

CSS:

.round { 
    border: 1px solid #000; 
    width: 100px; 
    height: 100px; 
} 

.round.rounded-5 { 
    border-radius: 5px; 
} 

.round.rounded-10 { 
    border-radius: 10px; 
} 

Answer 4

Sie können dies tun. aber Sie müssen die CSS im HTML-Dokument erstellen (nicht verknüpft, aber zwischen dem <style> Tag). Sie können PHP oder Javascript verwenden, um eine Schleife zu erstellen. zum Beispiel versuchen Sie das:

<style> 
    <?php 
    $round = 5; 
    for ($round = 50; $round <= 150; $round+=25){ 

    echo "#round$round{ 
     height: 300px; 
     width: 300px; 
     background: #f00; 

border-radius : ".$round."px; 
    margin: 2px; 
} 
"; 

    } 
    ?> 
</style> 
<?php 
for ($round=50;$round<=150; $round+=25){ 

    echo "<div id='round$round'> 

</div> 
      "; 

} 

?> 

hoffe das hilft! : D

Answer 5

Hier ist eine Antwort, die ich mit einer kleinen Menge von jQuery und ein kleines Wissen von Regex kam.

$(function() { 
 
     var number = $("div").attr("class").match(/\d+$/); 
 
     $("div").css({ 
 
     "width": "100px", 
 
     "height": "100px", 
 
     "background-color": "green", 
 
     "border-radius": number + "px" 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='round54'>hello</div>

Die .match() Funktion verwendet Regex. Regex wird verwendet, um Teile von Strings zu erkennen. Der \d erkennt beliebige Ziffern. Der + entspricht dem vorherigen Selektor 1 oder mehrmals. Mit anderen Worten, die Nummer kann eine mehrstellige Nummer sein. Und die $ bedeutet, dass es am Ende sein muss.

Also dann verwendet die jQuery das in der border-radius Eigenschaft später. Alles was Sie tun müssen ist anhängen px, und Sie sind gut zu gehen.

Fiddle

Answer 6

Sie können tun, was Sie sagen, aber Sie würden das Stichwort „rund“ zu diesem Zweck nur behalten müssen. Wenn Sie Folgendes betrachten.

div[class*="round"] { 
    background-color: green; 
    color: white; 
    padding: 10px; 
} 

Und dann spezifische Varianten davon Targeting mit ...

div[class="round5"] { 
    border-radius: 5px; 
} 

Der erste Block von Code alle Klassennamen auswählt, die das Wort Runde enthalten, das sowohl eine gute Sache und ein schlecht sein Ding.

Answer 7

Vielleicht wollen, was Sie ist wie diese

CSS

.round { 
    border-radius: 4px; /*it's default when you juse using .round*/ 
} 
.round.five { 
    border-radius: 5px; 
} 
.round.ten { 
    border-radius: 10px; 
} 

HTML

<div class="round five">something</div>