動態爲CSS提供值

我試圖動態設置div的顏色。動態爲CSS提供值

爲了給問題的概述，讓我們檢查以下內容：

<!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>

下面是我使用的CSS：

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

是否有可能，我可以給在HTML class="shape-fdd"則顯示淡紅色，如果我給class="shape-dfd"那麼它顯示淡綠色？

我剛剛查看了LESS，但我不知道它是否可以提供此功能。

我不尋找這個jQuery解決方案。如果可能的話，只有CSS或LESS或SASS。

任何幫助表示讚賞。

來源

2016-07-30 Ashish Joshi

爲什麼不能有一個類的紅色和淺綠色的準備，只是添加或刪除類視情況？ – guradio

我可以做到這一點，但我不想。 –

如果你可以更新你的問題，顯示你寫的所有類。 'shape-fdd'和'dfd'都不是你的問題，所以很難理解你的意思。 – LGSon

[編輯]，因爲我的答案已經被接受：我只是想突出了後來的讀者，下面將不是現在的工作：這是沒有可能的CSS3（只支持內容屬性權現在） :)

只是信息的快速註釋。目前尚不CSS3中可能（只適用於內容屬性現在）但也許很快：

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

可以檢查CSS - Add Color with a data attribute - attr(data-color color)

來源

2016-07-30 07:39:49 antoni

你可以在你的CSS上創建一個新的類並在你的html中使用它。

.dfd { 
    background: #dfd; 
}

然後class="shape dfd"應用.shape類的顏色。

這是一個工作JsFiddle。

來源

2016-07-30 07:36:46

使用jQuery和兩個不同的類就可以實現這樣的

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>

風格

.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>

來源

2016-07-30 07:45:24

取決於你想如何動態設置，使用Javascript/jQuery的？我會從這開始。設置數據屬性中的顏色並在你的css中指定它們，或者根據動態部分的要求做簡單的類。

喜歡的東西

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

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

和你的HTML看起來像

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

demo found at jsfiddle

編輯如果我得到了你的權利，你想要這個。你必須在SCSS中執行mixin或擴展（檢查LESS語法，jsfiddle只支持SCSS，因此我使用它）。你做一個基類，然後擴展與顏色一次，這樣

.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

來源

2016-07-30 07:54:17

動態爲CSS提供值

回答

相關問題