読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

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の設定
  • 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( );