子要素に影響を与えないボディーのフォントサイズを変更する方法

Question

私はここに来て、JS/jQueryを使った私の練習の小さな部分の解決策を見つけようとしています。私は、ページ全体のフォントサイズを変更しようとしているし、次のコードで実装することができます。私がしたいのは、クリックされた要素自体のフォントサイズを変更するのではなく、＃size1、＃size2、＃size3、実際には "Text size"スパンのテキストです。子要素に影響を与えずに親要素を変更する方法について、別のトピックでいくつかの答えを見たことがありますが、テキストを変更することに関するものであり、私のニーズには適用できませんでした。どんな助けもありがとう。

//HTML 
<span>Text size :</span> 
      <a id="small" href="#" style="font-size: 0.8em" onclick="textgr(0.8)">A</a> 
      <a id="middle" href="#" style="font-size: 1em" onclick="textgr(1)">A</a> 
      <a id="large" href="#" style="font-size: 1.2em" onclick="textgr(1.2)">A</a> 


//This works fine to change the font size on the whole page 

function textgr(gr){ 
        document.body.style.fontSize = gr + "em"; 
}  

//I've tried to pack this piece of code in the function above, but it would not do anything at all 

function textgr2(){ 
     document.getElementById(small).style.fontSize = 0.8 + "em"; 
     document.getElementById(middle).style.fontSize = 1 + "em"; 
     document.getElementById(large).style.fontSize = 1.2 + "em"; 
} 

Answer 1

document.getElementById("text-size-controls").addEventListener("click", function(evt) { 
 
    var sz; 
 
    var target = evt.target; 
 
    if (evt.target.hasAttribute('data-size')) { 
 
    sz = evt.target.getAttribute('data-size'); 
 
    document.getElementById("text-area").setAttribute("class",sz); 
 
    } 
 
});

#text-size-controls { 
 
    cursor: pointer; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#text-size-controls li { 
 
    display: inline-block; 
 
} 
 

 
.small { 
 
    font-size: 10px; 
 
} 
 

 
.medium { 
 
    font-size: 16px; 
 
} 
 

 
.large { 
 
    font-size: 20px; 
 
} 
 

 
h1 { 
 
    font-size: 2.0em; 
 
} 
 

 
.text { 
 
    font-size: 1.0em; 
 
}

<ul id="text-size-controls"> 
 
    <li data-size="small">Small</li> 
 
    <li data-size="medium">Medium</li> 
 
    <li data-size="large">Large</li> 
 
</ul> 
 
<div id="text-area"> 
 
<h1> 
 
Header 
 
</h1> 
 
<p class="text"> 
 
    This is some text 
 
</p> 
 
</div>

小さな、媒体と大が画素にフォントサイズを設定するが、H1との.textクラスということに注意してくださいサイズをに調整しますems。これにより、テキストの基本サイズが確実に設定され、比例的に調整されます。

このソリューションはjQueryを必要としません。あなたの質問のコードはJavaScriptであり、jQueryではないので省略しました。