HTML・CSSの操作

HTMLの操作

• 要素内のテキストの設定・変更やHTML要素の設定・変更など

テキストの設定

• 要素内のテキストを設定する場合は、text( )メソッドを使用します

$(function(){
  $( '#txt' ).text( 'テキストが変更されました' );
});

《テキスト内容を取得する場合》

var text =  $( '#txt' ).text( );

HTML要素の設定

• HTML要素を設定したい場合は、html( )メソッドを使用します
• html( )メソッドの引数にHTML要素を入れることで、そのセレクタ要素の中にHTML要素が追加されます

$(function(){
  $( '#content' ).text( '<p id=“txt”>p要素が追加されました</p>' );
});

《HTML要素を取得する場合》

var html =  $( '#content' ).html( );

要素の削除

• 要素を削除したい場合は、remove( )メソッドを使用します
• remove( )メソッドを実行すると、そのセレクタの要素は削除されます
• そのため画面上には、何も表示されなくなります

$(function(){
  $( '#txt' ).remove( );
});

CSSの操作

• CSSは基本的にスタイルシートで設定しますが、場合によってはjQueryで制御する必要が出てきます

CSSの設定

• CSSを設定する場合は、CSSメソッドを使用します

$(function(){
  $( '#txt' ).css( 'color', '#f00' );
});

《定義》

$(function(){
  $( セレクタ ).css( 'プロパティ名', '値' );
});

《CSSを取得する場合》

• 取得したい属性を第一引数に指定します

$(function(){
  alert( $( '#txt' ).css( 'color' ) );
});

幅と高さの設定・取得

• CSSメソッドを使用せずに、幅と高さを設定・取得できるメソッドが用意されています
• 単位を指定していない場合は「px」になります

$(function(){
  $( '#box' ).width( 100 ).height( 100 );
});

px以外の単位を入れたい場合は、

$( セレクタ ).width( '100%' );
$( セレクタ ).height( '100%' );

これらのメソッドも、引数なしで実行すると値を取得することができます。

var w =  $( 'box' ).width( );
var h =  $( '#box' ). height( );