jQuery CSSの値を設定/取得するサンプル(css)

jQueryのcssメソッドで、CSSの値を設定/取得するサンプルです。

目次

サンプル CSSのプロパティと値を設定/取得する
  CSSメソッド

CSSの値を設定/取得する

CSSの値を設定/取得するサンプルルです。
ボタン1を押すと、cssメソッドで背景色を変えます。
ボタン2を押すと、cssメソッドで背景色とフォントサイズを変えます。
ボタン3を押すと、設定したフォントサイズを取得し表示します。

ボックス1

フォントサイズ: 

 

上記コードのサンプルです。

<style>
#box1{width:130px;height:80px;border:1px solid #000;
text-align:center;font-size:16px;}
</style>

<div id="box1">ボックス1</div>
<p id="p1">フォントサイズ: </p>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />
<input type="button" id="button3" value="ボタン3" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
    
        $("#button1").click(function() {
            $("#box1").css("font-size","14px");
        });
    
        $("#button2").click(function() {
            $("#box1").css({
                "background-color":"LightSkyBlue",
                "font-size":"20px"
            });
        });
    
        $("#button3").click(function() {
            const size1 = $("#box1").css("font-size");

            if(size1 === "20px"){
                $("#p1").text("フォントサイズは20pxです");
            }else if(size1 === "14px"){
                $("#p1").text("フォントサイズは14pxです");
            }else if(size1 === "16px"){
                $("#p1").text("フォントサイズは16pxです");
            }
        });
</script>

16行目は、cssメソッドでフォントのサイズを設定しています。
21,22行目は、cssメソッドで複数のプロパティと値を指定しています。
background-color,font-sizeがプロパティです。LightSkyBlue,20pxは値です。
27行目は、cssメソッドで現状のフォントサイズを取得しています。
29行目からは、if文でフォントサイズを判定しています。

cssメソッド

  • jQueryのcssメソッドです。
  • 指定したCSSを適用します。
  • 以下はjQueryサイトのcssメソッドのページです。
    http://api.jquery.com/css/

関連の記事

jQuery CSSのクラスを追加/削除する(addClass)

△上に戻る