CSSやJavascriptで使用が出来る複雑な属性の取得方法の紹介。

正規表現の属性セレクタ

属性を正規表現で簡単に検索することが可能です。

以下のコードに指定の方法を載せておきました。

	/* 特定の属性を持っている [属性]*/
	[autofocus]{
		color:#f44242;
	}

	/* 特定の属性が指定の値  [属性=値]*/
	[id=sample02]{
		color:#f4bc42;
	}

	/* 空白で区切られたリストから一致 [属性~=値] */
	[lang~=ja]{
		color:f4bc42;
	}

	/* -（ハイフン）で区切られた項目から一致 [属性|=値] */
	[lang|=en]{
		color:#2eaf03;
	}

	/* 特定の属性の前方一致 [属性^=前方一致]*/
	[class^=sample05]{
		color:#038aaf;
	}

	/* 特定の属性の後方一致 [属性$=後方一致]*/
	[class$=hoge]{
		color:#0348af;
	}

	/* 特定の属性の部分一致 [属性*=部分一致]*/
	[value*=fuga]{
		color:#2603af;
	}

またCSSだけでなくJavascriptでも以下のようにすると正規表現で取得することが可能になります。

// セレクタに前方一致でidにsampleを持っているものを取得する
var samples = document.querySelectorAll('[id^=sample]');
console.log(samples);

参考のMDNの記事はこちら、属性セレクタ

サンプル

サンプルではCSSで属性していで色を変えています。また、属性取得サンプルの部分では指定された属性の要素を表示します。

これでCSSでスタイルの指定やJavascriptの要素の指定が簡単になりました。

知っていると少し嬉しい機能です。

«前の記事：【HTML5】WebStorageを使ってみよう！Webアプリを作成する際のデバイス対応の話：次の記事»