使用css / js缩放所有字体

Question

我需要通过一次单击来更改所有字体的大小（因此它针对有视力问题的人进行了调整）。下次点击后它应该恢复正常。最简单的方法是什么？我不想访问每一个文本，因为它们很多。我想扩大约20-50％。有一个简单的方法吗？我使用bootstrap和jQuery。

Answer 1

要选择所有元素使用$( "*" )并设置font-size使用.css( "font-size", "25px" )

var flag=true;
function changeSize(){
if(flag)
{
   $( "*" ).css( "font-size", "50px");
   flag=false;
   }
 else{
 
  $( "*" ).css( "font-size", "15px");
  flag=true;
  }
}

*{
font-size:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
<button onclick="changeSize()">change size</button>

Answer 2

选择所有元素并按所需的数量缩放其字体大小。

$("*").each(function(index) {
  var size = $( this ).css("font-size");
  $( this ).css("font-size", parseInt(size)*YOUR_FACTOR);
});

您也可以通过保留变量进行切换来反转此操作。

Answer 3

这是一种方法。你必须在像containter这样的元素上迭代你的p ul，你想要增加字体。

$(".action-btn").on("click", function() {
        var action = $(this).attr('data-value');
        var elements = $("#section").find("p, ul,ol");
        var fontSizeToIncreasedOrDecreased = 2;
        fontChange(elements,fontSizeToIncreasedOrDecreased,action)
    });
  
function fontChange(elements,fontSizeToIncreasedOrDecreased,action) {
    $(elements).each(function() {
        var c = $(this);
        if(action == 'in'){
        c.css("font-size", parseInt(c.css("font-size")) + fontSizeToIncreasedOrDecreased)
        }else{
        c.css("font-size", parseInt(c.css("font-size")) - fontSizeToIncreasedOrDecreased)
        
        
        }
        
        
    })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section">

  <P> Lorem ipsum text ... </p>
 <ul>
 <li>hello 1 </li>
 </ul>
<input type="button" class="action-btn" value="Zoom In" data-value="in" id="btn" />
<input type="button" class="action-btn" value="Zoom Out" data-value="out" id="zoomOut" />
</section>

Answer 4

你可以更好地在javascript中点击css类。

例如

HTML

<div class="original-font">
  <!-- any element-->
</div>

CSS

.original-font.large-font {
   font-size: calc('your original font' + '% how much you want to increase or decrease');
}

JS

$(".original-font").click(function() {
  $(".original-font").toggleClass('larger-font');
});

Answer 5

使用zoom属性尝试这个：

html,
body {
  zoom: 1;
  font-size: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeSize('up')">+ size (using zoom)</button>
<button onclick="changeSize('down')">- size(using zoom)</button>
<div>DIV</div>
<span>SPAN</span>
<p>P</p>

<script>
  function changeSize(param) {
    var zoom = 0.1
    if (param == "up") {
      $("body").css("zoom", '+=' + zoom);
    } else {
      $("body").css("zoom", '-=' + zoom);
    }
  }

</script>