jQueryとjQuery Cookieを使いフォントサイズを変更し、次回訪問時もその設定を適用させる方法。
実装例（サンプル）
10px15px20px
下の文の現在のフォントサイズ：。
この文のフォントサイズが変更になる。
実装例（サンプル）の動作について
- 「10px」「15px」「20px」のサイズをクリックすると、「この文のフォントサイズが変更になる。」の文のフォントサイズを変更する。
- 変更後のサイズをクッキーに保存するので、次回訪問時も、そのサイズを適用する。
実装例（サンプル）のソースコード
読み込み
<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() {
fontSize();
jQuery( '#FontSizeS' ).click( function () {
fontSize( '10px' );
} );
jQuery( '#FontSizeM' ).click( function () {
fontSize( '15px' );
} );
jQuery( '#FontSizeL' ).click( function () {
fontSize( '20px' );
} );
function fontSize( $fontSize ){
if( $fontSize == undefined ){
var $fontSize = jQuery.cookie( 'fontSize' );
if( $fontSize == undefined ){
var $fontSize = '10px';
}
}
jQuery( '#fontSize' ).html( $fontSize );
jQuery.cookie( 'fontSize', $fontSize, { expires: 1 } );
jQuery( '#sample' ).css( { 'font-size': $fontSize } );
}
} );
// -->
</script>
<!--
jQuery( function() {
fontSize();
jQuery( '#FontSizeS' ).click( function () {
fontSize( '10px' );
} );
jQuery( '#FontSizeM' ).click( function () {
fontSize( '15px' );
} );
jQuery( '#FontSizeL' ).click( function () {
fontSize( '20px' );
} );
function fontSize( $fontSize ){
if( $fontSize == undefined ){
var $fontSize = jQuery.cookie( 'fontSize' );
if( $fontSize == undefined ){
var $fontSize = '10px';
}
}
jQuery( '#fontSize' ).html( $fontSize );
jQuery.cookie( 'fontSize', $fontSize, { expires: 1 } );
jQuery( '#sample' ).css( { 'font-size': $fontSize } );
}
} );
// -->
</script>
CSS
<style type="text/css">
#FontSizeS,
#FontSizeM,
#FontSizeL {
margin-right: 1em;
padding: 0.5em 1em;
border: 1px solid #666666;
border-radius: 5px;
background-color: #f0f0f0;
cursor: pointer;
}
</style>
#FontSizeS,
#FontSizeM,
#FontSizeL {
margin-right: 1em;
padding: 0.5em 1em;
border: 1px solid #666666;
border-radius: 5px;
background-color: #f0f0f0;
cursor: pointer;
}
</style>
HTML
<div style="margin: 1em;">
<p style="margin-bottom: 1em;"><span id="FontSizeS">10px</span><span id="FontSizeM">15px</span><span id="FontSizeL">20px</span></p>
<p>下の文の現在のフォントサイズ：<span id="fontSize"></span>。</p>
<p id="sample">この文のフォントサイズが変更になる。</p>
</div>
<p style="margin-bottom: 1em;"><span id="FontSizeS">10px</span><span id="FontSizeM">15px</span><span id="FontSizeL">20px</span></p>
<p>下の文の現在のフォントサイズ：<span id="fontSize"></span>。</p>
<p id="sample">この文のフォントサイズが変更になる。</p>
</div>