【JQuery】CSSを変更する方法

公開日：2014/01/25

更新日：2014/01/23

カテゴリー: JQuery

JQueryを利用して、WebサイトのCSSを変更する方法を紹介します。

JQueryでCSSを変更

WebサイトのCSSは単純にCSSファイルを変更すれば良いですが、ユーザーサイドでCSSを変更したい場合はJQueryを使うと捗ります。

方法はとても簡単で、基本は以下です。

$('要素 その子要素').css( 'プロパティ名', '値');

サンプル

ユーザーが「非表示」ボタンをクリックしたら、指定した部分が非表示すなわち「diaplay:none;」されるサンプルを紹介します。

【JQuery】

<script type="text/javascript">
<!--
    $(function(){
        $("#click-display input").on("click", function() {
            $('div.text-display').css( 'display', 'none');
        });
    });
// -->
</script>

これを任意の部分（基本的には「<head>」～「</head>」の間）に設置します。

【HTML】

<div id="click-display">
<input type="button" value="非表示">
</div>
<div class="text-display">
<p>ここの部分が非表示になる部分です。</p>
</div>

これを任意のコンテンツ部分に設置します。

備考

JQueryを利用する場合は、JQueryの本体を読み込む必要があります（そうしないと動きません）。

あわせて読んでほしい！

Follow @ysklog_net 　

まだコメントはありません。

コメントフォーム

JQueryでCSSを変更

サンプル

備考

関連してそうなオススメ記事

コメント