单击父级时如何更改子级文本大小答案

【问题标题】：How to change child text size when clicking parent单击父级时如何更改子级文本大小
【发布时间】：2019-07-16 12:28:31
【问题描述】：

我想点击一个标题，然后标题下方的文本大小会发生变化。

我可以通过使用 id 来做到这一点，但这会更改添加 id 的页面上的所有文本。我只希望它旁边的文本/它的组改变。

这是我正在使用的代码：

<h1 value="Increase Font Size" onclick="increaseFontSize('increasetext', 10)" class=" page-heading title"><i class="fa fa-arrow-circle-o-right"></i>Main Text </h1>

<p> the text which needs to increase<p/>

<h1 value="Increase Font Size" onclick="increaseFontSize('increasetext', 10)" class=" page-heading title"><i class="fa fa-arrow-circle-o-right"></i>Main Text </h1>

<p> the text which needs to increase<p/>

<script type="text/javascript">
function increaseFontSize(id, increaseFactor){
 txt = document.getElementById(id);
 style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
 currentSize = parseFloat(style);
 txt.style.fontSize = (currentSize + increaseFactor) + 'px';
}

我可以在每个文本和标题上尝试不同的 id，但这可能会导致其他问题。

【问题讨论】：

你在用 angularjs 吗？
您实际上应该尝试在每个文本上使用不同的 id，在 HTML 中，id 必须是唯一的。如果你保持这样，你以后很可能会遇到麻烦。如果您希望整个页面具有相同的值，请使用 class 和 getElementsByClassName。不过，包装元素将是解决您的问题的一种简单方法。
谢谢你能扩展你所说的包装元素的意思
如果与h1相关的所有文本都增加了它们的大小，并且h1本身都在一个父元素（包装器）内，如果它已经是情况下，您可以编辑问题以将更多 HTML 结构添加到问题中，这会有所帮助
更新的代码是你需要的

标签： javascript angularjs cordova phonegap

【解决方案1】：

最简单的方法是创建一个包装器，这里有一个特定的类，以包含您想要增加大小的所有元素。这里的 id 有点棘手，因为 HTML 元素没有 getElementById 函数。

<div class="increaseWrapper">
  <h1 value="Increase Font Size" onclick="increaseFontSize(this, 'increasetext', 10)" class=" page-heading title"><i class="fa fa-arrow-circle-o-right"></i>Main Text </h1>
  
  <p id="increasetext"> the text which needs to increase<p/>
</div>

<div class="increaseWrapper">
  <h1 value="Increase Font Size" onclick="increaseFontSize(this, 'increasetext', 10)" class=" page-heading title"><i class="fa fa-arrow-circle-o-right"></i>Main Text </h1>
  <div>
    <p id="increasetext"> the text which needs to increase<p/>
    <p id="increasetext"> the text which needs to increase<p/>
  </div>
</div>

<script type="text/javascript">
function increaseFontSize(element, id, increaseFactor){
  var parent = element;
  //traversing structure to find the wrapper (you can easily find shims of classList if you need to support older browsers)
  while(parent && !parent.classList.contains('increaseWrapper')){
    parent = parent.parentElement;
  }
  //if wrapper found, finding elements in wrapper and increase
  if(parent){
    var txt, elms = parent.getElementsByTagName("*"), i, l = elms.length;
    for (i = 0; i < l; i++) {
      if (elms[i].id === id) {
        txt = elms[i];
        style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
        currentSize = parseFloat(style);
        txt.style.fontSize = (currentSize + increaseFactor) + 'px';
      }
    }
  }
}
</script>

但是，正如我告诉你的，在这里使用类在语义上要正确得多，因为 id 必须是唯一的，而且更容易，因为所有 HTML 元素都有 getElementsByClassName 函数：

<div class="increaseWrapper">
  <h1 value="Increase Font Size" onclick="increaseFontSize(this, 'increasetext', 10)" class=" page-heading title"><i class="fa fa-arrow-circle-o-right"></i>Main Text </h1>
  
  <p class="increasetext"> the text which needs to increase<p/>
</div>

<div class="increaseWrapper">
  <h1 value="Increase Font Size" onclick="increaseFontSize(this, 'increasetext', 10)" class=" page-heading title"><i class="fa fa-arrow-circle-o-right"></i>Main Text </h1>
  <div>
    <p class="increasetext"> the text which needs to increase<p/>
    <p class="increasetext"> the text which needs to increase<p/>
  </div>
</div>

<script type="text/javascript">
function increaseFontSize(element, className, increaseFactor){
  var parent = element;
  //traversing structure to find the wrapper (you can easily find shims of classList if you need to support older browsers)
  while(parent && !parent.classList.contains('increaseWrapper')){
    parent = parent.parentElement;
  }
  //if wrapper found, finding elements in wrapper and increase
  if(parent){
    var txts = parent.getElementsByClassName(className), i, l = txts.length;
    for(i = 0; i < l; i++){
      style = window.getComputedStyle(txts[i], null).getPropertyValue('font-size');
      currentSize = parseFloat(style);
      txts[i].style.fontSize = (currentSize + increaseFactor) + 'px';
    }
  }
}
</script>

注意：使用此代码，h1 也可以增加自己的大小，只要它有包装类并且内部有一个带有增加类/id 的内部元素：

<h1 value="Increase Font Size" onclick="increaseFontSize(this, 'increasetext', 10)" class=" page-heading title increaseWrapper"><i class="fa fa-arrow-circle-o-right"></i><p class="increasetext">Main Text</p></h1>

【讨论】：