0

私はいまjavascriptで、fontsizeを変更するスライダーを実装しているのですが、
ページを開いたとき、実際のサイズと、スライダー上の値が異なっています。

inputのvalueで設定しているように、javascriptの初期値valueも10にしたいです。
(表示されるフォントのサイズは10pxなのですが)、スライダーでは中心に位置しています。

ページを開くと、一度スライダーのトグルが10付近に位置するのですが、すぐに中心に戻ります。
ですので、javascriptのvalueが優先されていると考えました。
こちらのjavascriptのvalueの設定方法をお教えいただきたいです。

※CSSではfontsizeに関して設定していません。

<li><span class="filter-type">font-size</span>
<input type="range" name="fontsize" id="slider0" min="1" max="50" value="10" onchange="changeFontSize()"></li>

<div class=\"texts\" id=\"fontstyle\">テキスト</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
        function changeFontSize() {             
                var size = document.getElementById('slider0').value;
                document.getElementById('fontstyle').style.fontSize = size + 'px';
            }
</script>

このinput type="range"の値を、GET送信したいので、あまりHTMLの形は変えたくありません。
しかし、変更しても送信できるような方法をご存知の方も、ご教授いただけたらと思っております。

お願い致します。

2
  • \"texts\" id=\"fontstyle\" の部分なぜエスケープしているのかわかりません。単純に"texts" id="fontstyle" でよいと思います。それ以外は別段問題無いように思います。フォントサイズをvalueと合わせるためには単にchangeFontSize()を最初に一度呼びだせばいいだけのように思います。「スライダーが中央に戻ってしまう。」については再現しませんでした。
    – BLUEPIXY
    Commented 2015年11月15日 8:20
  • ご回答ありがとうございます。 phpファイル上でechoしているのでエスケープしています。質問用に正すのを見落としました...。 以下のようにしたら、10に設定はされませんでしたが、逆にスライダーのトグル位置通りにfontsizeが設定されました!ありがとうございます! (実はfontweightもありました) window.onload = function() { changeFontSize(); changeFontWeight(); } function changeFontSize() { var size = document.getElementById('slider0').value; document.getElementById('fontstyle').style.fontSize = size + 'px'; } function changeFontWeight() { var weight = document.getElementById('slider1').value; document.getElementById('fontstyle').style.fontWeight = weight; }
    – rrrnnnn
    Commented 2015年11月15日 8:36

0

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

のタグが付いた他の質問を参照する。