2

こんにちは。

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

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

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

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

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

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

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

4 件の回答 4

2

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

@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%%; }
}
1

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

<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)">

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

1

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

$(function() {
  $("#add").click(function() {
    $("#box").css({"width":"50px"});
  });
  $("#remove").click(function() {
    $("#box").css({"width":""});
  });
});
.box {
  margin: 15px 0px 15px 0px;
  width: 200px;
  height: 150px;
  background-color: blue;
}
<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>

0

JavaScriptで

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。