:enabled クラス
:enabled クラスは、エレメントに disabled パラメーターが設定されていない場合にスタイルを反映する擬似クラスです。 対となる疑似クラスに :disabled があります。
対象となるエレメントは <input>、<button>、<textarea>、<fieldset> などの <FORM> 部品です。
それらタグエレメントはデフォルトで enabled となっています。disabled パラメーターが設定されていなければ enabled ということになります。
-- HTMLファイル --
<label>:enabled クラスの例(disabled の未設定) <input type="text" ></input></label>
-- CSSファイル --
input:enabled {
background-color: yellow;
}
詳しくは Example を参照してください
ページ内 Index
構文(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 擬似クラスが反応していることが分かりやすいように、擬似クラスが反映された項目名が blue 色になっています。
:disabledのExampleの対比として作成してあります。