jQueryでCSSを制御

jQueryを利用してCSSのバリューも変更できます。

いろいろな機能がありますね。

例えば横の長さを調節することもできます。 100pxなdivを500pxに変更できます。、jQueryを利用してできます。

では、やってみましょう。

$('SELECTOR').css();

今この講座をみてる方はcoreasurからhtmlからcssにかけて今のjQueryをみてると思って講座を始めます。

cssでテキストのカラーを変更するには次のようでした。

selector{color:red}

jQueryでCSSのcolor属性のバリューを変更するなら次のようです。

$('SELECTOR').css('color','red');

上のように使います。css('CSSの属性','バリュー');

では例でみてみましょう。

状況　1

100px,200px,300pxという文字を作ってクリックする時にdivの横の長さが100px,200px,300pxに変更する

やってみましょう。変数を利用してみましょうね。

$(function(){
    var box = $('.box');
    var btn_100px = $('.btn_100px');
    var btn_200px = $('.btn_200px');
    var btn_300px = $('.btn_300px');

    btn_100px.click(function(){
        box.css('width','100px');
    });
    btn_200px.click(function(){
        box.css('width','200px');
    });
    btn_300px.click(function(){
        box.css('width','300px');
    });
});

上のように書くとクリックイベントがcssを制御しますね。

では横の長さが50px,縦の長さが20pxなボックスを作ってみましょう。バックグラウンドは黄色で。。。

CSS source :
.box{width:50px;height:20px;background:yellow}
.btn{cursor:pointer}
HTML source :
<div class="box"></div>
<p class="btn btn_100px">100px</p>
<p class="btn btn_200px">200px</p>
<p class="btn btn_300px">300px</p>

ではソースでやってみましょうね。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<style>
    .box{width:50px;height:20px;background:yellow}
    .btn{cursor:pointer}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    var box = $('.box');
    var btn_100px = $('.btn_100px');
    var btn_200px = $('.btn_200px');
    var btn_300px = $('.btn_300px');

    btn_100px.click(function(){
        box.css('width','100px');
    });

    btn_200px.click(function(){
        box.css('width','200px');
    });
    btn_300px.click(function(){
        box.css('width','300px');
    });
});
</script>
</head>
<body>
    <div class="box"></div>
    <p class="btn btn_100px">100px</p>
    <p class="btn btn_200px">200px</p>
    <p class="btn btn_300px">300px</p>
</body>
</html>

結果

100px クリック

200px クリック

300px クリック

こうjQueryでCSSの制御もできます。
float, display, width, height, color, background, margin, padding なども可能です。

ありがとうございます。