jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

大中小ボタンでフォントサイズを変更する

概要
大中小ボタンでフォントサイズを変更します。
CSSの差し替えではなく、class属性にfontSizeChangeが指定されている箇所を、この例では85%,100%,130%に動的に変更します。
CSSファイルを増やしたくない場合や、手軽に大中小ボタンを設置したい場合に適している事でしょう。
使用方法
コメントを参考に実装します。
備考
この例では、ON,OFFのボタンを大中小それぞれ用意しています。
smallon.png
smalloff.png
middleon.png
middleoff.png
largeon.png
largeoff.png

/**
 * フォントサイズを変更する
 *
 * 小中大ボタン
 * <img src="img/smalloff.png" id="fontSizeSmall">
 * <img src="img/middleon.png" id="fontSizeMiddle">
 * <img src="img/largeoff.png" id="fontSizeLarge">
 *
 * コンテンツ内
 * <div class="fontSizeChange">aaa</div>
 * <span class="fontSizeChange">aaa</span>
 *
 * @auther ao-system
 */
(function(window,document){
	var _fontSizeSmallId = 'fontSizeSmall';		//id名
	var _fontSizeMiddleId = 'fontSizeMiddle';	//id名
	var _fontSizeLargeId = 'fontSizeLarge';		//id名
	var _percentSmall = '85%';
	var _percentMiddle = '100%';
	var _percentLarge = '130%';
	var _fontSizeElms = null;
	var _cookieName = 'fontSizeChange';		//クッキーはこの1個だけ使用
	var _targetClassName = 'fontSizeChange';
	init();

/**
 * addEventListener クロスブラウザ対応
 *
 */
	function addEvt(elm, tpe, func) {
		if (elm.addEventListener) {
			return elm.addEventListener(tpe, func, false);
		} else if (elm.attachEvent) {
			return elm.attachEvent('on' + tpe, func);
		} else {
			return elm['on' + tpe] = func;
		}
	}

/**
 * 文字列中に特定の文字列を含むか否か
 *
 */
	function isIncludeString(src,needle) {
		if (src == null) {
			return false;
		}
		var dst = src.replace(needle,'');
		if (dst.length != src.length) {
			return true;
		}
		return false;
	}

/**
 * クッキーに登録
 *
 */
	function setCookie(v) {
		var expire = new Date();
		expire.setTime( expire.getTime() + 1000 * 60 * 30);
		document.cookie = _cookieName + '=' + v + '; expires=' + expire.toUTCString();
	}

/**
 * クッキー読み取り
 *
 */
	function getCookie() {
		var result = new Array();
		var allcookies = document.cookie;
		if (allcookies != '') {
			var cookies = allcookies.split(';');
			for (var i = 0; i < cookies.length; i++) {
				var cookieOne = cookies[i].split('=');
				//result[cookieOne[0].replace(' ','')] = decodeURIComponent(cookieOne[1].replace(' ',''));
				result[cookieOne[0].replace(' ','')] = cookieOne[1].replace(' ','');
			}
		}
		return isset(result[_cookieName]) ? result[_cookieName] : '';
	}

/**
 * isset
 *
 */
	function isset(data) {
		return (typeof(data) != 'undefined');
	}

/**
 * initial
 *
 */
	function init() {
		_fontSizeElms = document.getElementsByClassName(_targetClassName);	//対象リストアップ
		fontSizeButtons();
		var cookiePercent = getCookie();
		if (cookiePercent != '') {
			setFontSize(cookiePercent);
		}
	}

/**
 * initial イベントリスナー登録
 *
 */
	function fontSizeButtons() {
		if (document.getElementById(_fontSizeSmallId)) {
			addEvt(document.getElementById(_fontSizeSmallId),'click',function(){setFontSize(_percentSmall);});
		}
		if (document.getElementById(_fontSizeMiddleId)) {
			addEvt(document.getElementById(_fontSizeMiddleId),'click',function(){setFontSize(_percentMiddle);});
		}
		if (document.getElementById(_fontSizeLargeId)) {
			addEvt(document.getElementById(_fontSizeLargeId),'click',function(){setFontSize(_percentLarge);});
		}
	}

/**
 * font-size属性のセット、差し替え
 *
 */
	function setFontSize(percentStr) {
		var elms = _fontSizeElms;
		for (var i = 0; i < elms.length; i++) {
			if (elms[i].tagName.toLowerCase() == 'table') {
				var subElms = elms[i].getElementsByTagName('th');
				for (var j = 0; j < subElms.length; j++) {
					setFontSizeElm(percentStr,subElms[j]);
				}
				var subElms = elms[i].getElementsByTagName('td');
				for (var j = 0; j < subElms.length; j++) {
					setFontSizeElm(percentStr,subElms[j]);
				}
			} else {
				setFontSizeElm(percentStr,elms[i]);
			}
		}
		changeButton(percentStr);
		setCookie(percentStr);
	}

/**
 * font-size属性のセット、差し替え 処理実行
 *
 */
	function setFontSizeElm(percentStr,elm) {
		if (elm.firstChild == undefined) {	//要素内が空の場合は何もしない
			return;
		}
		if (elm.firstChild.getAttribute == undefined
			|| elm.firstChild.getAttribute('style') == undefined
			|| isIncludeString(elm.firstChild.getAttribute('style'),'font-size') == false) {
			var spanElm = document.createElement('span');
			spanElm.style.fontSize = percentStr;
			spanElm.style.lineHeight = percentStr;
			spanElm.innerHTML = elm.innerHTML;
			elm.innerHTML = '';
			elm.appendChild(spanElm);
		} else {
			var styles = elm.firstChild.getAttribute('style').split(';');
			var findFlag = false;
			for (var j = 0; j < styles.length; j++) {
				if (isIncludeString(styles[j],'font-size') && isIncludeString(styles[j],percentStr)) {
					findFlag = true;
					break;
				}
			}
			if (findFlag) {
				//何もしない
			} else {
				elm.firstChild.style.fontSize = percentStr;
				elm.firstChild.style.lineHeight = percentStr;
			}
		}
	}

/**
 * 小中大ボタンの切り替え
 *
 */
	function changeButton(percentStr) {
		offSrc(_fontSizeSmallId);
		offSrc(_fontSizeMiddleId);
		offSrc(_fontSizeLargeId);
		if (percentStr == _percentSmall) {
			onSrc(_fontSizeSmallId);
		} else if (percentStr == _percentMiddle) {
			onSrc(_fontSizeMiddleId);
		} else if (percentStr == _percentLarge) {
			onSrc(_fontSizeLargeId);
		}
	}

/**
 * src属性をoffが付加されているものにする
 *
 */
	function offSrc(idName) {
		var src = document.getElementById(idName).getAttribute('src');
		if (isIncludeString(src,'off.')) {
			//何もしない
		} else if (isIncludeString(src,'on.')) {
			src = src.replace('on.','off.');
			document.getElementById(idName).setAttribute('src',src);
		}
	}

/**
 * src属性をonが付加されているものにする
 *
 */
	function onSrc(idName) {
		var src = document.getElementById(idName).getAttribute('src');
		if (isIncludeString(src,'on.')) {
			//何もしない
		} else if (isIncludeString(src,'off.')) {
			src = src.replace('off.','on.');
			document.getElementById(idName).setAttribute('src',src);
		}
	}

})(window,document);
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page