ホーム > attr (全8件)
  • IE7でrowspan属性値を取得・変更する

    idが’cell-a1’のセルのrowspan属性値を取得して1増やす。

    $( '#cell-a1' ).each( function () {
	var rowspan = 1;
	if ( typeof $(this).attr( 'rowSpan' ) !== 'undefined' )
		rowspan = parseInt( $(this).attr( 'rowSpan' ) );
	$(this).attr( 'rowSpan', rowspan+1 );
} );

    IE7では’rowspan’を指定しても値を取得・更新できない。IE7に対応するためには名前を’rowSpan’（Sのみ大文字）にする（’colspan’は’colSpan’に）。もう1つの注意点は、IE7ではrowspan属性値が1と記述していてもその属性値を取得するとundefinedになるため、typeofを使って比較するといった工夫が必要になる。

    キーワード:
  • 値が定義されているか調べる

    現在の要素のid属性が指定されているか調べる。

    if ( typeof $( this ).attr( 'id' ) != 'undefined' ) {
	/* 値が定義されている場合の処理 */
}

// 変数valを調べる場合は
if ( typeof val != 'undefined' ) {
	/* 値が定義されている場合の処理 */
}

    typeof演算子で値の型を取得できる。未定義の場合は’undefined’、文字列は’string’、数値は’number’、nullまたはオブジェクトは’object’となる。

    キーワード:
  • 要素のstyle属性を設定する

    IDがfeatureの要素のstyle属性を設定する。

    /* 1つの属性値を設定する */
$('#feature').css( 'color', '#000000' );

/* 複数の属性値を設定する */
$('#feature').css( {
	color: '#000000',
	background-color: '#FFFFFF'
} );

    attr関数でstyle属性を変更することと同じで、上記であれば$(‘#feature’).attr( ‘style’, ‘color: #000000’ );や$(‘#feature’).attr( ‘style’, ‘color: #000000; background-color: #FFFFFF;’ );のように記述できる。

    キーワード:
  • jQuery UIのdraggableのドラッグ終了時、元の位置に戻す

    IDがitemの要素にdraggableを適用し、ドラッグ終了時に移動範囲が±100ピクセル以内なら元の位置に戻す。

    $(document).ready( function () {
	$( '#item' ).draggable( {
		stop: function ( e, ui ) {
			if ( Math.abs( ui.position.top ) <= 100 &&
			     Math.abs( ui.position.left ) <= 100 ) {
				$(this).attr( 'style', 'position: relative;' );
			}
		}
	} );
} );

    attr関数で、style属性値に’position: relative;’をセットすると元の位置に戻る。

    キーワード:
  • チェックボックスをオン／オフする

    IDがagreeのチェックボックス要素をオン／オフにする。

    /* 1.9以降: オンにする */
$( '#agree' ).prop( 'checked', true );

/* 1.9以降: オフにする */
$( '#agree' ).prop( 'checked', false );

/* 1.9以前（1.8.3など）であれば以下も使用できるが、prop関数が導入された1.6以降であれば上記の方が無難 */
/* オンにする */
$( '#agree' ).attr( 'checked', 'checked' );

/* オフにする */
$( '#agree' ).removeAttr( 'checked' );

    jQuery 1.9前後でattr関数およびremoveAttr関数の振舞が異なる。ラジオボタンも基本的には同じだが、隣接するラジオボタンを考慮する必要がある。

    キーワード:
  • 要素の幅を設定する

    idがleft-sideの要素の幅を100pxにする。

    $( '#left-side' ).width( 100 );

    $( '#left-side' ).attr( 'style', 'width:100px;' );とほぼ同じ効果だが、width関数はほかのstyle属性の値を気にしなくていい。なお、左右のpadding値を含めた値を指定する場合は、outerWidth関数を使用する。

    キーワード:
  • 要素の高さを設定する

    idがleft-sideの要素の高さを100pxにする。

    $( '#left-side' ).height( 100 );

    $( '#left-side' ).attr( 'style', 'height:100px;' );とほぼ同じ効果だが、height関数はほかのstyle属性の値を気にしなくていい。

    キーワード:
  • チェックボックス(ラジオボタン)がチェックされているか調べる

    idがcheckbox1のチェックボックス(ラジオボタン)がチェックされているか調べる。

    /* 1.9以降の場合: prop関数を使用 */
if ( $( '#checkbox1' ).prop( 'checked' ) ) {
	/* チェックされている場合の処理を記述 */
}
/* 1.9以降の場合: is関数を使用 */
if ( $( '#checkbox1' ).is( ':checked' ) ) {
	/* チェックされている場合の処理を記述 */
}

/* 1.9以前（1.8.3など）の場合 */
if ( $( '#checkbox1:checked' ).length > 0 ) {
	/* チェックされている場合の処理を記述 */
}

/* idがcheckbox1がクリックされた時に何かする場合 */
$( '#checkbox1' ).click( function () {
	if ( typeof $(this).attr( 'checked' ) == 'undefined' ) {
		/* チェックされていない */
	} else {
		/* チェックされている */
	}
} );

    jQueryのバージョンが1.9前後でattr関数の振舞が異なる。1.9以前ならattr関数でchecked属性（その値の有無）を調べられるが、1.9以降であればprop関数かis関数を使わないといけない。

    キーワード:
 
 
ツールバーへスキップ