動的に値をCSSに提供する

divの色を動的に設定しようとしています。動的に値をCSSに提供する

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

それは私がそれをHTMLでclass="shape-fdd"を与えることが可能である：以下

<!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です：

はのは、物事の下にチェックしてみましょう、問題の概要を提供するために、私は class="shape-dfd"を与える場合、それは明るい緑色を示していますか？

私はちょうど同じものを探しましたが、この機能を提供できるかどうかはわかりません。

私はこれのための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; 
}

は、あなたがこの

のように達成することができますjqueryの2つの異なるクラスを使用してCSS - Add Color with a data attribute - attr(data-color color)

出典

2016-07-30 07:39:49 antoni

あなたのCSSで新しいクラスを作成し、htmlで使用できます。 class="shape dfd"そして

.dfd { 
    background: #dfd; 
}

.shapeクラスの色を適用します。

ここには、作業JsFiddleがあります。

出典

2016-07-30 07:36:46

に確認することができます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

EDIT ようになります。あなたはmixinをしなければならないか、SCSSで拡張する必要があります（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に提供する

答えて

関連する問題