Question

我需要一键更改所有字体的大小（因此，它针对视力不佳的人进行了调整）。下次单击后，它应恢复正常。这样做最简单的方法是什么？我不想访问每个文本，因为它们很多。我想将所有比例扩大20-50％。有一个简单的方法吗？我使用引导程序和jQuery。

Answer 1

选择所有元素，然后根据需要缩放其字体大小。

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

您还可以通过保留一个变量来反转它。

Answer 2

要选择所有元素，请使用$( "*" )，并使用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 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>

使用CSS / JS缩放所有字体

5 个答案: