如何參數傳遞給CSS類

我想知道是否有可能通過這一些靈活性，增加CSS：如何參數傳遞給CSS類

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

其中.round是圓角和一類「5」確定半徑量。可能嗎？我已經看到了一些地方，但我不知道實施如何發生。

來源

2013-07-27 Mostafa Talebi

CSS類必須手動定義。 – mash

，因爲這一切都一個屬性不能從它的價值定義邊框半徑分開。沒有辦法告訴某個元素「一般」具有圓角，同時也沒有指定要將它們舍入多少。

然而，你可以做一些與多個類別，不同性質類型的相似：

HTML：

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

CSS：

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

的.rounded類添加圓角半徑和.blue和.green類添加背景顏色。

（我喜歡命名並命令類，使得它們在邏輯上讀取，像<div class="large box"></div>等）。

來源

2013-07-27 03:11:04 daGUY

偉大的思想家一樣+1 – apaul

你可以做同樣的事情，但不完全是你已經把它的方式。

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

在上面的例子中的紅色邊界將被保留，但邊界半徑將會改變。

注意不要以數字開頭的類名，因此r5而不是5

來源

2013-07-27 03:14:33 apaul

您可以使用multiclassing的元素。例如：

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

來源

2013-07-27 03:17:44 sanntu

你可以做到這一點。但你必須創建HTML文檔中的CSS（不鏈接，但<style>標籤之間）。你可以使用PHP或JavaScript來做一個循環。例如試試這個：

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

} 

?>

希望這有助於！：d

來源

2013-07-27 03:35:28

如果你想使它動態（不重新加載），你必須使用JavaScript來做到這一點。 –

這裏是我想出了一個答案需要少量的jQuery和正則表達式的小知識。

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

的.match()函數使用正則表達式。正則表達式用於檢測部分字符串。 \d檢測到任何數字。 +與之前的選擇器匹配1次或更多次。換句話說，該號碼可以是多位數字。並且$意味着它必須在最後。

因此，然後jQuery將在稍後使用border-radius屬性。你所要做的就是追加px，你很好走。

Fiddle

來源

2013-07-27 04:04:25

您可以使用這種方法，但是向DOM寫入新的類名嗎？例如'class =「round round5」' – Mindthetic

你可以做你在說什麼，但你必須保留關鍵字「圓」僅用於這一目的。如果你看看以下內容。

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

，然後使用靶向它特定變種...

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

第一個代碼塊選擇含有一輪字所有的類名，這既可以是一件好事，壞的事情。

來源

2014-08-04 20:47:15 Mindthetic

這可能會奏效，但是已經有很多更清潔和更少潛在的回火方法來完成這個列表..... – user2366842

確實如此，但正確的情況下這種解決方案可能是正確或唯一的方法。 – Mindthetic

也許你想要的是像這樣

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>

來源

2018-02-19 09:28:48

如何參數傳遞給CSS類

回答

相關問題