jQueryのCSSの操作とは？初心者向け解説

この記事では、jQueryのメソッドを使用して、CSSを操作する方法を説明します。

jQueryのセレクタとは？初心者向け解説

jQueryのHTMLの操作とは？初心者向け解説

CSSの設定

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

■Javascript

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

■HTML

<body>
    <p id="txt">テキスト</p>
</body>

このコードを実行すると、”テキスト”の文字色が青になります。

■Javascript

$(function(){
    $('#txt').css('font-size', '18px');
});

■HTML

<body>
    <p id="txt">テキスト</p>
</body>

このコードを実行すると、”テキスト”のフォントサイズが18pxになります。

一度に複数のCSSを設定することもできます。

■Javascript

$(function(){
    $('#txt').css({
        'color', '#0000FF',
        'font-size', '18px'
    });
});ぷ

CSSのプロパティを取得したい場合は、取得したいプロパティを第１引数に指定します。

■Javascript

$(function(){
    alert( $('#txt').css('font-size') );
});

■CSS

#txt{
 'color', '#0000FF';
 'font-size', '18px';
}

この記事では、jQueryのメソッドを使用して、CSSを操作する方法を説明しました。