jQueryを使用してCSS変数を割り当てる

クリックすると、特定の.divが背景色を変更させようとしています。ユーザーは色を変更できるので、色は変数でなければならず、.ready（）のときに実行する必要があります。jQueryを使用してCSS変数を割り当てる

私は背景色を変更したい変数に '--main-color'というCSS変数を使用していますが、 '$（this）'を使用しているときにjQueryによる解決方法が見つからないようです。

カスタムのCSSプロパティ/変数を.click（）関数で適用する具体的な方法はありますか？

$(document).ready(function(){ 
 

 
\t // CREATE GRID 
 
\t for (i = 0; i<1152; i++) { 
 
\t \t var board = document.createElement('div'); 
 
\t \t board.className = 'grid'; 
 
\t \t board.addId = 'color' 
 
\t \t document.getElementById('container').appendChild(board); 
 
\t }; 
 
\t // END CREATE GRID 
 

 
    \t // HOVER AND CLICK FUNCTION // 
 
    \t  $('#color-picker').colorpicker().on('changeColor', function(ev){ 
 
    var choice = ev.color.toHex(); 
 
     document.body.style.setProperty('--main-color', choice); 
 
\t }); 
 

 
    \t $('.grid').hover(function(){ 
 
     $(this).click(function(){ 
 
     \t $(this).css('background-color', 'var(--main-color)'); 
 
\t \t }); 
 
\t }); 
 
\t // END HOVER AND CLICK FUNCTION 
 

 

 
});

body { 
 
\t background-color: #222; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t box-sizing: border-box; 
 
\t font-family:'Patua One', cursive; 
 
\t color: #FFF; 
 
\t --main-color: #000; 
 
} 
 
*{ 
 
\t background-color: #222; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t box-sizing: border-box; 
 
\t font-family:'Patua One', cursive; 
 
\t color: #FFF; 
 
} 
 

 
#title { 
 
\t font-family:'Revalia', cursive; 
 
\t font-size: 3em; 
 
\t color: #FFF; 
 
\t text-align: center; 
 
} 
 

 
.menu { 
 
\t float:left; 
 
    clear: left; 
 
    width: 300px; 
 
    margin-top: 5%; 
 
    margin-left:5%; 
 
} 
 

 
#container { 
 
\t height: 800px; 
 
\t width: 800px; 
 
\t border: 1px solid #424242; 
 
\t margin-left: 30%; 
 
\t margin-top: 5%; 
 
\t background-color: #FFF; 
 
} 
 

 
.grid { 
 
\t height: 20px; 
 
\t width: 20px; 
 
\t border: 1px dotted #424242; 
 
\t background-color: #FFF; 
 
\t display: inline-grid; 
 
} 
 

 
div.grid:hover{; 
 
\t background-color: var(--main-color); 
 
} 
 

 
.active { 
 
\t background-color: var(--main-color); 
 
} 
 

 
.form-control { 
 
    display: block; 
 
    width: 100%; 
 
    height: 34px; 
 
    padding: 6px 12px; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #FFF; 
 
    background-color: #222; 
 
    background-image: none; 
 
    border: 1px solid #F85658; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <title>jQuery Sketch</title> 
 

 
\t \t <!--Javascript & jQuery Imports /--> 
 
\t \t <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script> 
 
\t \t <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> 
 
\t \t <script src='js/main.js'></script> 
 
\t \t <!-- Latest compiled and minified CSS --> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t \t <!-- Latest compiled and minified JavaScript --> 
 
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
\t \t <!--CSS Imports /--> 
 
\t \t <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
\t \t <link href="CSS/style.css" rel="stylesheet" type="text/css"> 
 
\t \t <!--Font Imports /--> 
 
\t \t <link href="https://fonts.googleapis.com/css?family=Patua+One|Revalia" rel="stylesheet"> 
 

 
\t \t \t \t <!--BOOTSTRAP IMPORTS /--> 
 
\t \t <script src='js/bootstrap-colorpicker.min.js'></script> 
 
\t \t <link rel='stylesheet' href='CSS/bootstrap-colorpicker.min.css'></link> 
 
\t \t <link rel='stylesheet' href='CSS/bootstrap-colorpicker.min.css.map'></link> 
 

 
\t </head> 
 
\t <body> 
 
\t <div id = 'title'> 
 
\t ZACH<span style='color: #F85658'>'</span>S PIXELMAKER</div> 
 
\t </div> 
 

 
\t <div class = 'menu'> 
 
\t \t <div class = 'color-section'> 
 
\t \t <p class="ui-corner-all" style="padding:12px;"> Color: 
 
\t \t </p> 
 
\t \t </div> 
 
\t \t <div id="color-picker" class="input-group colorpicker-component"> 
 
    <input type="text" value="#000000" class="form-control" /> 
 
    <span class="input-group-addon"><i></i></span> 
 
    <script> 
 

 
    </script> 
 
</div> 
 

 
\t </div> 
 

 
\t <div id = 'container'> 
 
\t </div> 
 

 
\t </body> 
 
</html>

出典

2017-07-09 Z Monk

"私がクリックしたときに、背景色を変更するには、特定の.divを引き起こすしようとしています。"それでは、ジョブに適切なツールを使用してください：単純なjquery .click（）または.mousedown（）と.css（）の代わりに複雑な部分を見てください – frenchie

TheColorというJS変数に色の16進コードを保存し、 .css（ 'background'、TheColor）必要な場合 – frenchie

@frenchieありがとう。あなたのソリューションは完全に機能しました。私はKISSソリューションを忘れる傾向があります。 –

クラスに色を割り当て、クラスを切り替えます。

document.querySelector('div').addEventListener('click',function() { 
 
    this.classList.toggle('color'); 
 
})

body { 
 
    --main-color: #000; 
 
} 
 
.color { 
 
    background-color: var(--main-color); 
 
    color: white; 
 
}

<div>div</div>

またはjqueryの使用して...

$(function() { 
 
    $('div').on('click',function() { 
 
    $(this).toggleClass('color'); 
 
    }); 
 
});

body { 
 
    --main-color: #000; 
 
} 
 
.color { 
 
    background-color: var(--main-color); 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>div</div>

出典

2017-07-09 19:40:42

クラスのトグルに関する問題は、クラスの色が変更されると、そのクラスのすべてのdivも色を変更することです。最初にクリックしたときに元々割り当てられた色を維持したいと思います。 –

@ZMonk申し訳ありませんが、あなたのデモは動作しません。 * "質問のデバッグに役立つ質問（"なぜこのコードは動作しないのですか？ "）には、目的の動作、特定の問題またはエラー、および質問自体の再現に必要な最短コードが含まれている必要があります。 ]。 "* –

私はオフラインプラグインを使用しており、CDNを見つけることができません。明確にするには：私はtoggleClassソリューションを試しました。問題は、.colorクラスの背景色を再割り当てすると、そのクラスのすべてのdivが新しい割り当てられた背景色に色を更新するということです。四角形の箱を考えてみましょう。私が上の2つをGreenに割り当てて、変数を新しい色に変更すると、クラスの色を再割り当てしたので、上の2つは緑色ではなく色が変わります。 –

jQueryを使用してCSS変数を割り当てる

答えて

関連する問題