Jak przekazać parametry do klas css

Question

Chcę wiedzieć, czy jest możliwe, aby dodać pewną elastyczność w css poprzez to:

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

gdzie .round jest klasa z zaokrąglonymi rogami i „5” określa ilość promieniu . Czy to możliwe? Widziałem gdzieś, ale nie wiem, jak ma miejsce realizacja.

Answer 1

Nie można zdefiniować promienia obramowania oddzielnie od jego wartości, ponieważ jest to jedna właściwość. Nie da się powiedzieć, by element miał zaokrąglone rogi "w ogóle", nie precyzując także, ile zaokrąglić.

Można jednak zrobić coś niby podobny z wielu klas i różnych właściwościach:

HTML:

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

CSS:

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

Klasa .rounded dodaje promień graniczny i klasy .blue i .green dodają kolor tła.

(Chciałbym wymienić i uporządkować klasy tak, aby były logiczne, jak na przykład <div class="large box"></div> itd.).

Answer 2

Można zrobić coś podobnego, ale nie tak, jak to ułożyłeś.

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

W powyższym przykładzie czerwona granicy zostaną zachowane, ale border-radius zmieni.

pamiętać, że nie zaczynaj nazwy klas z numerami, stąd r5 zamiast 5

Answer 3

Można użyć multiclassing na elemencie. Np .:

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

można to zrobić. ale musisz utworzyć css w dokumencie HTML (nie połączony, ale między tagiem <style>). możesz użyć php lub javascript do stworzenia pętli. na przykład spróbuj tego:

<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> 
      "; 

} 

?> 

nadzieję, że to pomoże! : D

Answer 5

Oto odpowiedź, którą wymyśliłem, która wymaga niewielkiej ilości jQuery i niewielkiej wiedzy o Regex.

$(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>

Funkcja .match() wykorzystuje wyrażenia regularnego. Regex służy do wykrywania części łańcuchów. \d wykrywa dowolne cyfry. Model + dopasowuje poprzedni selektor 1 lub więcej razy. Innymi słowy, liczba może być liczbą wielocyfrową. I $ oznacza, że ​​musi być na końcu.

Tak więc jQuery używa tego później w właściwości border-radius. Wszystko, co musisz zrobić, to dołączyć px, i jesteś dobry, aby przejść.

Fiddle

Answer 6

Można zrobić to, co mówisz, ale trzeba by zarezerwować słowa kluczowego „okrągłych” wyłącznie do tego celu. Jeśli spojrzeć na następujące.

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

A potem kierowania konkretne warianty nim za pomocą ...

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

Pierwszy blok kodu wybiera wszystkie nazwy klas, które zawierają słowo okrągły, może to być zarówno dobre i złe rzecz.

Answer 7

Może to, co chcesz, jest jak ten

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>