Масштабировать все шрифты с помощью css / js - PullRequest
Новая
       8

Масштабировать все шрифты с помощью css / js

0 голосов
/ 03 сентября 2018

Мне нужно изменить размер всех шрифтов одним щелчком мыши (чтобы он был настроен для людей с проблемами зрения). После следующего нажатия он должен вернуться в нормальное состояние. Какой самый простой способ сделать это? Я не хочу получать доступ к каждому тексту, так как их много. Я хотел бы масштабировать все примерно на 20-50%. Есть ли простой способ сделать это? Я использую bootstrap и jQuery.

Ответы [ 5 ]

0 голосов
/ 03 сентября 2018

Попробуйте использовать свойство 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>
0 голосов
/ 03 сентября 2018

Лучше переключать классы CSS по клику в JavaScript.

Например

Html 

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

1008 * 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');
});
0 голосов
/ 03 сентября 2018

Для выбора всех элементов используйте $( "*" ), а для установки 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>
0 голосов
/ 03 сентября 2018

Вот способ сделать это. Вы должны перебрать свой 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>
0 голосов
/ 03 сентября 2018

Выберите все элементы и масштабируйте их размер шрифта до требуемой суммы. 

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

Вы также можете изменить это, сохранив переменную для переключения.

...