以角度增加/减少页面中所有元素的字体大小答案

【问题标题】：Increase/Decrease font size of all elements in page in angular以角度增加/减少页面中所有元素的字体大小
【发布时间】：2019-09-06 06:10:32
【问题描述】：

我的角度组件中有一段代码：

    IncreaseFontSize()
    {
        let FontSize:any = document.body.style.fontSize;
        if(!FontSize)
        {
            FontSize = 1.4;
        }
        else
        {
            FontSize = parseFloat(FontSize);
        }
        document.body.style.fontSize = (FontSize+0.1) + 'rem';
    }


    DecreaseFontSize()
    {
        let FontSize:any = document.body.style.fontSize;
        if(!FontSize)
        {
            FontSize = 1.4;
        }
        else
        {
            FontSize = parseFloat(FontSize);
        }
        document.body.style.fontSize = (FontSize-0.1) + 'rem';
    }

这些函数在点击两个按钮时被调用，但它不会改变已经为它们定义了字体大小的元素的字体大小。

我需要增加/减少所有元素的字体大小，即如果标签的字体大小为 12px，段落的字体大小为 11px，div 的字体大小为 1.2rem，则应该增加点击增加按钮，字体大小增加 0.1 rem。

我应该如何继续这种方法？提前致谢。

【问题讨论】：

您需要为单个元素使用em 或rem。
我该怎么做，我应该循环遍历所有元素吗？
不，您需要定义所有 .css 的字体大小，例如 font-size:1rem, font-size:1.25rem.... 然后更改正文字体大小即可，参见例如sitepoint.com/understanding-and-using-rem-units-in-css

标签： javascript css angular

【解决方案1】：

试试这样的。你可以看到div 和px 不会增长，而另一个会增长。

var fontSize = 16;

function IncreaseFontSize() {
  fontSize = (fontSize + 1);
  document.body.style.fontSize = fontSize + 'px';
}


function DecreaseFontSize() {
  fontSize = (fontSize - 1);
  document.body.style.fontSize = fontSize + 'px';
}

body,
.font-constant {
  font-size: 16px;
}

.font-varies {
  font-size: 1em;
}

<button onclick="IncreaseFontSize()">+</button>
<button onclick="DecreaseFontSize()">-</button>

<div class="font-varies">
  Hello
</div>

<div class="font-constant">
  how are you?
</div>

【讨论】：

我需要更改每个元素的字体大小
看看答案，这是改变每个元素的字体大小，其中字体大小是用em 或rem 指定的。因此，您必须在整个项目中不断使用 em（或 rem），而不是使用这种方法调整每个元素的字体大小。
@cloned 我无法对任何 css 类进行更改，并且它也没有更改类 font-varies 的元素的字体大小
为什么不能对 css 类进行更改？是的，它改变了font-varies类的字体大小，当你按下按钮时，字体大小变得越来越小。
@cloned 这只是css类不应该改变的要求，对不起我的意思是font-constant类不是font-varies

【解决方案2】：

就我而言，我还想从 CSS 中获取 fontSize 的值。当您不在 Javascript 上下文中或在正文标记的内联 CSS 中初始化此值时，这一点尤其重要。这里的策略基本上是保存偏移量并以rem为单位推断css的原始值the relative font size based on the root element：

  private fontSizeOffset = 0;

  increaseFontSize() {
    document.body.style.setProperty(
      'font-size',
      `calc(1rem + ${++this.fontSizeOffset}px)`
    );
  }

  decreaseFontSize() {
    document.body.style.setProperty(
      'font-size',
      `calc(1rem + ${--this.fontSizeOffset}px)`
    );
  }

【讨论】：