私はいま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の形は変えたくありません。
しかし、変更しても送信できるような方法をご存知の方も、ご教授いただけたらと思っております。
お願い致します。
\"texts\" id=\"fontstyle\"
の部分なぜエスケープしているのかわかりません。単純に"texts" id="fontstyle"
でよいと思います。それ以外は別段問題無いように思います。フォントサイズをvalue
と合わせるためには単にchangeFontSize()
を最初に一度呼びだせばいいだけのように思います。「スライダーが中央に戻ってしまう。」については再現しませんでした。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; }