59805


jQuery初心者です。  
Googleで調べまくったのですが、やり方が見当たらず…。皆さん教えて下さい。

既に、CSSでwidthを100pxで設定している要素に対して、  
jQueryを使って「"#btn"をクリックすると"#box"の幅が20pxずつ縮小する」  
という指示は出来ないものでしょうか。

[code]

    $("#btn").on("click",function(){
      $("#box").css('width', '-20px');
    });
[/code]

では出来ませんでした。（そらそうなんですが、最適なやり方が思いつかず…）  
実現したいこととしては、boxの右側から20pxずつ削れていって、  
５回クリックすると0pxになるようにしたいのです。

ご協力をお願いしますm(_ _ )m


CC BY-SA 4.0
2019-10-19T05:35:15.520
59804
2019-10-19T11:54:12.477
2019-10-19T11:54:12.477
32986
36258
question
javascript jquery
jQueryで要素の横幅（width）を拡大縮小するには？


widthメソッドを呼び出す方法があります。

[code]

    $("#btn").on("click",function(){
        $("#box").width("-=20");
    });
    
[/code]

または、width内に関数を指定する方法があります。

[code]

    $("#btn").on("click",function(){
        $("#box").width(function(i, w) { return w - 20; });
    });
    
[/code]

なお、HTMLページロード時にclickイベントの定義を読み込む場合は、

[code]

    <script>
    $(function(){
        //ここにコード
    });
    </script>
    
[/code]

内にコードを記述してください。  
<https://learn.jquery.com/using-jquery-core/document-ready/>

Ref: <https://forum.jquery.com/topic/use-width-to-decrease-width-of-element>


CC BY-SA 4.0
2019-10-19T05:59:25.477
59805
2019-10-19T06:05:55.927
2019-10-19T06:05:55.927
59804
answer