特定のdivのテキストサイズを変更してから、それをブートストラップに戻す方法は？

Question

これはウェブページの記事用です。ユーザーが記事のテキストを大きくまたは小さくすることを許可します（サイズをハードコードすることなく元のブートストラップフォントサイズに戻すことができればいいです）

マイナスプラスの入力ボタンを付けるつもりです

どうすればよいですか？

CLEARIFICATION：私は心の中でブートストラップでそれを正しく行う方法でより多くの興味、それが特定のサイズにフォントサイズを設定します（どのように私はそれを変更した後、それが何だったかにそれを取り戻すん）

Answer 1

これはあなたの役に立つ例です。最初に元のフォントサイズを変数fsStartに保存し、最初に同じ値を持つ2番目の変数fsを宣言し、変更するたびに現在のフォントサイズを保存します。残りはかなりわかりやすいと思います。これはもちろん、最適化することができますが、私はあなたがその考えを得ると思う。

var fsStart = parseInt($('.text').css('font-size'), 10); 
 
var fs = parseInt($('.text').css('font-size'), 10); 
 

 
console.log('fsStart: '+fsStart); 
 

 
$('.minus').on('click', function() { 
 
    fs -= 2; 
 
    $('.text').css('font-size', fs + 'px'); 
 
    console.log(fs); 
 
}); 
 
$('.plus').on('click', function() { 
 
    fs += 2; 
 
    $('.text').css('font-size', fs + 'px'); 
 
    console.log(fs); 
 
}); 
 
$('.reset').on('click', function() { 
 
    $('.text').css('font-size', fsStart + 'px'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text"> 
 
    <p>Lorem ipsum dolor ...</p> 
 
    <p>... sit amet ...</p> 
 
    <p class="btns"> 
 
    <button class="minus"> - </button> 
 
    <button class="reset"> o </button> 
 
    <button class="plus"> + </button> 
 
    </p> 
 
</div>

Answer 2

サイズごとに2つのクラスを作成し、ボタンをクリックしてスワップします。 2つのスタイルのためのCSSは次のようになります。

.text-large { 
    font-size: 12px; 
} 

.text-small { 
    font-size: 9px; 
} 

ボタンは次のようになります。このJavaScriptを使用して

<button onclick="changeTextSize(false)">-</button> 
<button onclick="changeTextSize(true)">+</button> 

：

は情報不足でにテストしていません

function changeTextSize(toLarge) { 
    var articleText = document.getElementById('article-text'); //Or whatever the id is 
    if (toLarge) { 
     articleText.className = articleText.className.replace('text-small', 'text-large'); 
    } else { 
     articleText.className = articleText.className.replace('text-large', 'text-small'); 
    } 
} 

あなたの答えは私があなたの現在のコードがどのように見えるかを意味しません。

Answer 3

多分あなたは3つのボタンを作ることができます。最初のものは、テキストを元のものから小さくし、2番目のものを大きなものに、最後のボタンを元のビューのものにします。

各バットンで、変更を行うPHPコードを作成する必要があります。