Question

我要单击标题，然后标题下方的文本大小更改。

我可以使用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，但这可能会导致其他问题。

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

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

1 个答案: