10871


こんにちは。

monacaでアプリケーションを作っています。

フォトスライダーを使っているのですが表示する端末に合わせスライダーのwidthを変更できないかと思っています。

使用しているスライダーがレスポンシブルに対応していないためCSSの設定ファイルからpx指定するようになっています。（100%に設定するとおかしな表示になります。。)

「レスポンシブルなスライダーに変更すればいい」とご指摘をいただきそうなのですが、処理が軽いことと先にスライダーの画像を別のアプリから動的に変更できるようにしてしまった為、できれば現状のスライダーを利用できればと思っています。

screen.widthで取得できる値をスライダーのwidthに設定したいのですがCSSファイルを  
動的に変更することは可能でしょうか。

どなたかご教授いただけると幸いです。

どうぞよろしくお願い致します。


CC BY-SA 3.0
2015-06-01T15:37:54.680
10855
2015-06-02T08:45:28.733
8389
question
javascript monaca css
monacaでCSSファイルを動的に変えたい


自分もそんなに詳しくはないのですが、画面サイズによって読み込むCSSを変えるのはどうでしょうか？  
画面の幅が900px未満はStyleA.css、幅が900px以上はStyleB.css といった感じに。

[code]

    <link rel="stylesheet" href="css/styleA.css"  media="screen and (max-width: 899px)">
    <link rel="stylesheet" href="css/styleB.css"  media="screen and (min-width: 900px)">
    
[/code]

画面幅に対し完全にレスポンシブルというわけではないですが。  
何段階か設定すれば、それっぽくなるかと。  
ただ、求めているものとは少し違いますよね。。。


CC BY-SA 3.0
2015-06-02T02:34:43.123
10866
2015-06-02T02:34:43.123
9912
10855
answer


横幅だけ後で追加する方法はどうですか。

[code]

    $(function() {
      $("#add").click(function() {
        $("#box").css({"width":"50px"});
      });
      $("#remove").click(function() {
        $("#box").css({"width":""});
      });
    });
[/code]

[code]

    .box {
      margin: 15px 0px 15px 0px;
      width: 200px;
      height: 150px;
      background-color: blue;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="box" id="box"></div>
    <button type="button" id="add">スタイル追加</button>
    <button type="button" id="remove">スタイル削除</button>
[/code]


CC BY-SA 3.0
2015-06-02T03:36:21.183
10868
2015-06-02T03:36:21.183
3516
10855
answer


わざわざ聞いているということは以下ではダメなんでしょうが  
質問の内容だけから判断してメディアクエリが一番手軽で  
スピードの問題もないように思いますが・・・

[code]

    @media screen and (max-width: 480px) {
       div.slidebarholder { width: 90%; }
    }
    @media screen and (min-width: 481px) and (max-width: 1024px) {
       div.slidebarholder  { width: 85%; }
    }
    @media screen and (min-width: 1025px) {
       div.slidebarholder  { width: 80%%; }
    }
    
[/code]


CC BY-SA 3.0
2015-06-02T04:11:48.703
10871
2015-06-02T04:50:15.677
2015-06-02T04:50:15.677
8477
8477
10855
answer


JavaScriptで

[code]

    var w = screen.width;
    // もしwの値に不満があるならここで演算
    $("#設定するID").css({width: w});
    
[/code]

とすれば、うまくいくはずです。


CC BY-SA 3.0
2015-06-02T04:24:53.923
10872
2015-06-02T08:45:28.733
2015-06-02T08:45:28.733
208
9959
10855
answer