22347


Monaca/onsen UIを用いてアプリ開発をしております。  
ajaxで動的にons-col/ons-rowをhtmlに追加し、その際、各ons-
colにcss要素の追加もしておりますが、cssの適用がうまくいかずに立ち往生しております。  
以下がコードになります。

html

[code]

    <ons-navigator page="top.html" var="app.navi"></ons-navigator>
    <ons-template id="top.html">
      <ons-page id="top-page">
        <ons-list-item modifier="chevron" class="item" id="list_up">
          <ons-row>
            <ons-col class="title">
              <header>
                <span class="item-title">リスト</span>
              </header>
            </ons-col>
          </ons-row>
        </ons-list-item>
       ・・・
      </ons-page>
    </ons-template>
    
    <ons-template id="list.html">
      <ons-page id="list-page">
        <ons-list>
          <ons-list-item>
            <div id="list"></div>
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-template>
    
[/code]

script

[code]

    (function(){
      'use strict';
      $(document).on('pageinit', '#top-page', function() {
        $('#list_up', this).on('click', function() {
          new_list();
          app.navi.pushPage('list.html');
        });
      });
    })();
    
    function new_list(){
      var data = {・・・}
      $.post("url", data).done(function(result){
       if (result.res == null){
         $('#list').text(該当ありません。);
       }
       else if (result.res == hit){
         var fd = document.createDocumentFragment();
         var list = document.getElementById('list');
         var onsrowNode = new Array();
         var onscolNode = new Array();
         var onscolNode2 = new Array();
    
         for (var i=0; i<result.count; i++){
           onsrowNode[i] = document.createElement('ons-row');
           onscolNode[i] = document.createElement('ons-col');
           onscolNode2[i] = document.createElement('ons-col');
    
           onscolNode[i].style.cssText = "width: 100px;";
           onscolNode2[i].style.cssText = "width: 100%;";
    
           onscolNode[i].innerText = "項目";
           onscolNode2[i].innerText = result.item;
    
           onsrowNode[i].appendChild(onscolNode[i]);
           onsrowNode[i].appendChild(onscolNode2[i]);
           df.appendChild(onsrowNode[i]);
         }
         list.appendChild(df);
         ons.compile(list);
       }
       else {
         ・・・
       }
     }).fail(function(){
      ・・・
     });
    }
    
[/code]

なお、こちらはうまくいきませんが、以下のように単純に下線を引くものであれば追加できました。  
「onsrowNode[i].style.cssText = "border-bottom-style: dotted;";」  
ons-colの幅の設定の仕方が誤っているのかと思いましたが、違うページではうまくcssが効いております。

修正すべき点をご教示頂ければ幸いです。  
宜しくお願い申し上げます。


CC BY-SA 3.0
2016-02-21T06:07:07.467
22339
2016-02-21T07:14:31.140
2016-02-21T06:41:40.273
14300
14300
question
monaca onsen-ui ajax
ajaxで動的にons-col/ons-row生成した時、onsenUIのcssの変更がうまくいかない


`.style.cssText='foo:bar'` は `<hoge style="foo:bar">` というHTMLのような動きをするわけですが、
`<ons-col>`
のstyle属性に書いたwidthプロパティは無視されてしまうようです。一方[OnsenUIのマニュアル](http://ja.onsen.io/reference/ons-
col.html)にも載っているwidth属性は動作します。

※質問通りの100px:100%ではページ幅を超えて折り返してしまったので、20%:80%に変えています

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script>
    <script>ons.bootstrap();</script>
    
    <ons-row>
      <ons-col style="width:20%;"> style="width:20%;" </ons-col>
      <ons-col style="width:80%"> style="width:80%" </ons-col>
    </ons-row>
    <ons-row>
      <ons-col width="20%"> width="20%;" </ons-col>
      <ons-col width="80%"> width="80%" </ons-col>
    </ons-row>
[/code]

もし上のサンプルの2段目のように `<ons-col width="100%">` 相当のことをしたいのであれば、
`.style.cssText="..."` の代わりに [`.setAttribute('width',
'100%')`](https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute)
とします。


CC BY-SA 3.0
2016-02-21T07:14:31.140
22347
2016-02-21T07:14:31.140
8000
22339
answer