38620


現在以下のような書き方で、webページ上のdivの幅を、ボタンを押す事によって動的に変更しています。

しかしボタンを押すまでは、二つのdivが半々のサイズになってしまいます。  
この二つのdiv要素がwebページを開いた段階では97%:3%になっており、  
どの後はボタンを押す事によって処理が分かれるという動きにしたいのですが、  
JavaScriptだけで、それを実現するにはどのように書けば良いのでしょうか？

[code]

    $('#<id>').click(function {
    var cnt = 0;
        if(cnt == 0){
            cnt = 1;
            $('#<div1のid>').closest(".dashboard-cell").css('width', '70%');
            $('#<div2のid>').closest(".dashboard-cell").css('width', '30%');
        } else {
            cnt = 0;
            $('#<div1のid>').closest(".dashboard-cell").css('width', '97%');
            $('#<div2のid>').closest(".dashboard-cell").css('width', '3%');
        }
    });
    $(window).trigger('resize');
    
[/code]


CC BY-SA 3.0
2017-10-12T02:24:57.913
38619
2017-10-12T02:36:37.960
25726
question
javascript
JavaScriptでdiv要素の幅の初期値と、その後動的に変更できる仕組みを作成したい


単純にDOMContentLoadedイベントで初期値を設定すればよいのではないでしょうか？

[code]

    $(function(){
      $('#<div1のid>').closest(".dashboard-cell").css('width', '97%');
      $('#<div2のid>').closest(".dashboard-cell").css('width', '3%');
    
      $('#<id>').on("click", function() {
        // クリックイベントの内容
      });
    });
    
[/code]


CC BY-SA 3.0
2017-10-12T02:36:37.960
38620
2017-10-12T02:36:37.960
2265
38619
answer