備忘録的プログラミングリファレンス

:enabled クラス

 :enabled クラスは、エレメントに disabled パラメーターが設定されていない場合にスタイルを反映する擬似クラスです。 対となる疑似クラスに :disabled があります。

 対象となるエレメントは <input><button><textarea><fieldset> などの <FORM> 部品です。

 それらタグエレメントはデフォルトで enabled となっています。disabled パラメーターが設定されていなければ enabled ということになります。

:enabled 例
-- HTMLファイル --

<input><label>:enabledに反応するリンク例</label></input>

-- CSSファイル --

input:enabled {
  background-color: gray;
}

構文(Syntax)

CSS

HTMLElement:enabled {
  style_propaties;
}

DOM ( JavaScript )

 疑似クラスは DOM ( JavaScript )から操作できません。

 以下は enabled である <input> エレメントに付随する <label> のフォントを JavaScript で変更する方法例です。

 しかしながら、スタイルのみの適応は擬似クラスを利用したほうが簡易です。

in HTML

<input type="radio" name="example" id="lbl00"><label for="lbl00">みけねこ</label></input>
<input type="radio" name="example" id="lbl01"><label for="lbl01">とらねこ</label></input>
<input type="radio" name="example" id="lbl02" disabled><label id="lbl03">チーター</label></input>

in JavaScript

var _elements = document.getElementsByTagName('input');
for( i=0; i < _elements.length; i++ ){
	var _lbl = document.querySelector('label[for="' + _elements[i].id + '"]');
	if( !_elements[i].disabled ){
			_lbl.style.fontWeight="bold";
	} else {
			_lbl.style.color="gray";
	}
}

Example

 :enabledの例です。 enabled 擬似クラスが反応していることが分かりやすいように、擬似クラスが反映された項目名がグレイ色になっています。

 :disabledのExampleの対比として作成してあります。