プログラミング未経験者の学習日記

私が学習した内容のまとめサイトです。

【jQuery入門】CSS、class、属性を操作するメソッドを使おう!

css メソッド

CSS に関する値の設定をする場合は css メソッドを使います。また、
メソッドチェーンを使っていくつも設定することができます。

$('p').css('color','red').css('background','blue');

また、値の設定だけではなく取得も可能です。例えば色の値を取得したい場合は下記となります。

console.log($('p').css('color')); 

 ※第2引数を指定しない場合は値の取得ができます。

addClass、removeClassメソッド

下記のような枠線とフォントサイズを設定するクラスをあらかじめ用意しておきます。

<style>
.myStyle{
     border: 5px solid green;
     font-size: 48px;
    }
</style> 

addClassを使って上記クラスを設定することが可能です。

$('p').addClass('myStyle'); 

attrメソッド

対象となる要素の属性を取得・変更・設定することができるメソッドです。例えば下記のaタグがあったとします。

<a href="http://www.google.com">google</a>

hrefの属性を取得したい場合は下記のように記載します。

console.log($('a').attr('href'));

※コンソール上、http://www.google.comと表示されます

また、hrefの属性を変更したい場合は下記のように記載します。

$('a').attr('href','http://google.co.jp');

上記のように属性を取得したり変更することが可能です。