hr 要素をかっこよく使う

概要

hr 要素は構造を区切るためのものではなく、線を引くだけの要素で、u 要素, i 要素, big 要素などと同じ視覚的な目的で使用される要素でそのレンダリングは UA 依存のため枠線が消えなくてもおかしいというわけではなさそうです。

hr 要素はブロック要素なので CSS で border を none にして、width, height や background を指定すれば装飾が可能です。しかし IE では hr 要素の border を消すことができません。Firefoxや opera, Netscape などの CSS をしっかり処理してくれるブラウザでは border を消すことができます。

そこで、IE だった場合のみ、hr 要素を div 要素に置き換えしてしまうための JavaScript を書いてみました。(mixi でご助言下さった皆様、ありがとうございました。)

ただし、hr 要素が空の div 要素になり、置き換えされた後は要素の意味が変わってしまうのでご利用は計画的に。

IE だった場合のみ、<hr class="separator" />を<div class="separator"></div>に変換します。その他のブラウザでは置き換えは行いません。

CSS で定義したスタイルを適用する場合はhr.separator,div.separator{}のようにします。

ソースコード

/*
 Author : http://www.yomotsu.net
 created: 2007/03/02
 Licensed under the GNU Lesser General Public License version 2.1
 
 IEのときに<hr class="separator" />を<div class="separator"></div>に変換するスクリプト
*/

function yomotsuReplaceHr(){
	if (document.all && !window.opera){
	
		hr = document.getElementsByTagName("hr");
		
		for(i=hr.length;i>0;i--){
			if (/\bseparator\b/.exec(hr[i-1].className)){
				
				div = document.createElement("div");
				div.className = hr[i-1].className;
				
				hr[i-1].parentNode.replaceChild(div,hr[i-1]);	
			}
		}
	}
}

addEvent(window, 'load', yomotsuReplaceHr);

/* add event
----------------------------------------*/

function addEvent(obj, evType, fn){
	if (obj.addEventListener){
		obj.addEventListener(evType, fn, false);
		return true;
	}
	else if (obj.attachEvent){
		var r = obj.attachEvent("on"+evType, fn);
		return r;
	}
	else {
		return false;
	}
}

トラックバックURI

http://www.yomotsu.net/lab/javascripts/replacehr/trackback

Web制作者がうれしいJavaScriptサンプル » TMJ styleさんからのコメント

2008年3月6日 10:19

[...] ■hr要素をかっこよく使う [...]

コメントフォーム

実験室に戻る

このページの目次