CSS-將參數傳遞給類
[英]CSS - pass parameter to class
問題描述
我不確定是否有可能，但仍在與您確認。
假設我有一個具有很多屬性的類，並且我想在另一個節中使用該類，但一個屬性值不同。
我們可以做這樣的事情嗎？
請看我的例子：
.class-test {
position: relative;
display: inline-block;
@include border-radius(3px / 3px 3px 3px 4px);
background-color: GREEN;
width: 266px; // This property should be dynamic..
.select-something {
display: inline-block;
font-size: 14px;
}
....
and much more properties..
....
}
所以我在兩個不同的地方使用該類，一個地方的寬度應該是266px，另一個地方的寬度應該是120px；
<div class="class-test">
.....
// here width should be 266px
</div>
<div class="class-test">
.....
// here width should be 120px
</div>
當然，我可以創建兩個具有不同寬度的不同類，但是它將以大量重復的代碼結尾
4 個解決方案
解決方案1
2 2015-07-22 08:02:30
您可以從類中刪除該屬性
然后再使用兩個類。 例如。
.width-1 {
width: 266px;
}
.width-2 {
width: 120px;
}
。 。 。
並且在每個元素中包括兩個類
<div class="class-test width-1">
.....
// here width should be 266px
</div>
<div class="class-test width-2">
.....
// here width should be 120px
</div>
解決方案2
1 2015-07-22 07:50:10
我想你可以使用這個技巧：
<div class="class-test">
.....
// here width should be 266px
</div>
<div class="class-test" style="width:120px">
.....
// here width should be 120px
</div>
解決方案3
1 已采納 2015-07-22 07:54:19
嘗試這個
<div class="class-test">
.....
// here width should be 266px
</div>
<div class="class-test testclass" >
.....
// here width should be 120px
</div>
的CSS
.class-test.testclass
{
width: 120px;
}
小提琴： https : //jsfiddle.net/1h1w8202/
解決方案4
1 2018-03-20 02:30:35
這似乎讓我可以將視頻放置在頁面上的任何位置。
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
z-index: -1;
}
</style>
</head>
<body>
<div class="relative" style='left:20px; top:30px'>
<video width="400" autoplay loop>
<source src="dinoheads.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<p>
</p>
</body>
</html>
將CSS .class作為參數傳遞給javascript函數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.