jQuery【 CSS 】colorとfontを変更するサンプル

colmun_main9524

CSS と同様にセレクタを使用する jQuery は、CSS の設定をスムーズに行うことができます。
今回は、jQuery を使用して 背景色やフォントに関する CSS を変更する際のサンプルを紹介します( css メソッドの使い方など、jQuery【 CSS 】スタイルを動的に変更するもご参照下さい )。

目次

 
1.background color
2.color
3.font-size

1.background color

 
jQuery を使用して ボックスの背景色を変更します。
各ボタンをクリックしてみて下さい。


 

 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  // ブルー
  $("#bgBtn1").click(function() {
    // cssで背景色をブルーに変更
    $("#bgBox").css("background-color","skyblue");
  });
  // ピンク
  $("#bgBtn2").click(function() {
    // cssで背景色をピンクに変更
    $("#bgBox").css("background-color","pink");
  });
  // リセット
  $("#bgBtn3").click(function() {
    // cssで背景色をデフォルトに変更
    $("#bgBox").css("background-color","#CCC");
  });
});
//-->
</script>

<div id="bgBox" style="background-color : #CCC; padding : 20px;">
  <input type="button" id="bgBtn1" value="ブルー">
  <input type="button" id="bgBtn2" value="ピンク">
  <input type="button" id="bgBtn3" value="リセット">
</div>

▲目次へ戻る

 

2.color

 
jQuery を使用して テキストの文字色を変更します。
各ボタンをクリックしてみて下さい。

jQuery で文字色を変更!
 

 

 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  // 赤
  $("#fcBtn1").click(function() {
    // cssで文字色を赤に変更
    $("#fcBox").css("color","red");
  });
  // 青
  $("#fcBtn2").click(function() {
    // cssで文字色を青に変更
    $("#fcBox").css("color","blue");
  });
  // リセット
  $("#fcBtn3").click(function() {
    // cssで文字色をデフォルトに変更
    $("#fcBox").css("color","black");
  });
});
//-->
</script>

<div id="fcBox" style="background-color : #CCC; padding : 20px;">
  jQuery で文字色を変更!
  <input type="button" id="fcBtn1" value=" 赤 ">
  <input type="button" id="fcBtn2" value=" 青 ">
  <input type="button" id="fcBtn3" value="リセット">
</div>

▲目次へ戻る

 

3.font-size

 
jQuery を使用して テキストの文字の大きさを変更します。
各ボタンをクリックしてみて下さい。

jQuery で文字サイズを変更!
 

 

 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  // 150%
  $("#fsBtn1").click(function() {
    // cssで文字サイズを150%に変更
    $("#fsBox").css("font-size","150%");
  });
  // 70%
  $("#fsBtn2").click(function() {
    // cssで文字サイズを70%に変更
    $("#fsBox").css("font-size","70%");
  });
  // リセット
  $("#fsBtn3").click(function() {
    // cssで文字色をデフォルトに変更
    $("#fsBox").css("font-size","100%");
  });
});
//-->
</script>

<div id="fsBox" style="background-color : #CCC; padding : 20px;">
  jQuery で文字サイズを変更!
  <input type="button" id="fsBtn1" value=" 150% ">
  <input type="button" id="fsBtn2" value="  70% ">
  <input type="button" id="fsBtn3" value="リセット">
</div>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です