Blog

HOME > Web > javascript > 【jQuery/javascript】cssを指定する方法

【jQuery/javascript】cssを指定する方法

2016/11/21

javascript JQuery css

備忘録です。

jQueryでCSSを指定する方法です。
参考サイト
jQuery：css()メソッドで指定した要素にCSSを追加する

css()メソッドは下記のように使用します。

//ひとつだけ指定
$('要素').css('プロパティ', '値');
//複数指定
$('要素').css({'プロパティ':'値', 'プロパティ':'値'});

サンプルHTML

<input type="button" id="click" value="クリック">
 
<div id="hoge">
テキスト
</div>

js 文字色を変更

<script type="text/javascript">
$(function(){
    $("#click").click(function(){
        $('#hoge').css('color', '#0000FF');
    });
});
</script>

js 複数のスタイルを指定

<script type="text/javascript">
$(function(){
    $("#click").click(function(){
        $('#hoge').css({'color':'#0000FF', 'font-size':'30px'});
    });
});
</script>

js cssを削除
値を空にするとCSSを削除することができます。

<script type="text/javascript">
$(function(){
    $("#click").click(function(){
        $('#hoge').css('color', '');
    });
});
</script>

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ