Question

我是新来的，试图通过JS / jQuery为我的练习的一小部分找到解决方案。我正在尝试更改整个页面的字体大小，并可以使用以下代码实现。我想要做的是不改变被点击元素本身的字体大小，在我的例子中，它们是：＃size1，＃size2，＃size3，实际上也是跨越“文本大小”的文本。我在另一个主题中看到了一些关于如何在不影响孩子的情况下更改父元素的答案，但它是关于改变文本而我无法将其应用于我的需求。任何帮助，将不胜感激。

//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

＆＃13;

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);
  }
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

请注意小，中和大设置像素中的字体大小，但 > h1 和 .text 类调整 ems 中的大小。这样可以确保设置文本的基本大小，然后按比例调整。

此解决方案不需要jQuery。我省略了它，因为你问题中的代码是JavaScript，而不是jQuery。

如何更改不影响子元素的正文字体大小

1 个答案: