jQueryとjQuery Cookieを使い、特定の要素の背景色を変更し、次回訪問時もその設定を適用させる方法。
実装例（サンプル）
coral yellow skyblue
現在の背景色：。
実装例（サンプル）の動作について
- 「coral」「yellow」「skyblue」のカラーネームをクリックすると、背景のボックスの色を変更する。「現在の背景色：」の右横に現在の背景色のカラーネームを表示する。
- 変更後の背景色をクッキーに保存するので、次回訪問時も、その背景色を適用する。
実装例（サンプル）のソースコード
読み込み
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.cookie.js"></script>
jQueryとjQuery Cookieを読み込む。
JavaScript
<script>
<!--
jQuery( function() {
backgroundColor();
jQuery( '#backgroundColorCoral' ).click( function () {
backgroundColor( 'coral' );
} );
jQuery( '#backgroundColorYellow' ).click( function () {
backgroundColor( 'yellow' );
} );
jQuery( '#backgroundColorSkyblue' ).click( function () {
backgroundColor( 'skyblue' );
} );
function backgroundColor( $backgroundColor ){
if( $backgroundColor == undefined ){
var $backgroundColor = jQuery.cookie( 'backgroundColor' );
if( $backgroundColor == undefined ){
var $backgroundColor = 'yellow';
}
}
jQuery( '#backgroundColor' ).html( $backgroundColor );
jQuery.cookie( 'backgroundColor', $backgroundColor, { expires: 1 } );
jQuery( '#sample' ).css( { 'backgroundColor': $backgroundColor } );
}
} );
// -->
</script>
<!--
jQuery( function() {
backgroundColor();
jQuery( '#backgroundColorCoral' ).click( function () {
backgroundColor( 'coral' );
} );
jQuery( '#backgroundColorYellow' ).click( function () {
backgroundColor( 'yellow' );
} );
jQuery( '#backgroundColorSkyblue' ).click( function () {
backgroundColor( 'skyblue' );
} );
function backgroundColor( $backgroundColor ){
if( $backgroundColor == undefined ){
var $backgroundColor = jQuery.cookie( 'backgroundColor' );
if( $backgroundColor == undefined ){
var $backgroundColor = 'yellow';
}
}
jQuery( '#backgroundColor' ).html( $backgroundColor );
jQuery.cookie( 'backgroundColor', $backgroundColor, { expires: 1 } );
jQuery( '#sample' ).css( { 'backgroundColor': $backgroundColor } );
}
} );
// -->
</script>
CSS
<style type="text/css">
#backgroundColorCoral,
#backgroundColorYellow,
#backgroundColorSkyblue {
margin-right: 1em;
padding: 0.5em 1em;
border: 1px solid #666666;
border-radius: 5px;
cursor: pointer;
}
#backgroundColorCoral {
background-color: coral;
}
#backgroundColorYellow {
background-color: yellow;
}
#backgroundColorSkyblue {
background-color: skyblue;
font-color: white;
}
#sample {
padding: 1em;
}
#sample p {
margin-bottom: 2em;
}
</style>
#backgroundColorCoral,
#backgroundColorYellow,
#backgroundColorSkyblue {
margin-right: 1em;
padding: 0.5em 1em;
border: 1px solid #666666;
border-radius: 5px;
cursor: pointer;
}
#backgroundColorCoral {
background-color: coral;
}
#backgroundColorYellow {
background-color: yellow;
}
#backgroundColorSkyblue {
background-color: skyblue;
font-color: white;
}
#sample {
padding: 1em;
}
#sample p {
margin-bottom: 2em;
}
</style>
HTML
<div id="sample">
<p>
<span id="backgroundColorCoral">coral</span>
<span id="backgroundColorYellow">yellow</span>
<span id="backgroundColorSkyblue">skyblue</span>
</p>
<p>現在の背景色：<span id="backgroundColor"></span>。</p>
</div>
<p>
<span id="backgroundColorCoral">coral</span>
<span id="backgroundColorYellow">yellow</span>
<span id="backgroundColorSkyblue">skyblue</span>
</p>
<p>現在の背景色：<span id="backgroundColor"></span>。</p>
</div>