→JavaScript программирование → Изменение размера шрифта в теле HTML документа
Иногда приходится выполнять достаточно непонятные задания заказчика или описанные в ТЗ. Одним из маразмов является онлайн изменение размера шрифта тела HTML. Зачем это надо я не знаю. Наверно, просто эффектная, никому ненужная фишка.
Сделаем это при помощи яваскриптового фреймворка JQuery и ихнего же UI, что бы было красивее:)
Итак, имеем три кнопки:
<div id="cahnge-font-size">
<input class="ui-state-default ui-corner-all" id="decreaseFont" type="button" name="#" value="Меньше">
<input class="ui-state-default ui-corner-all" id="resetFont" type="button" name="#" value="Нормально">
<input class="ui-state-default ui-corner-all" id="increaseFont" type="button" name="#" value="Больше">
</div>
Яваскрипт будет выглядеть так:
<script type="text/javascript">
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('html').css('font-size');
$("#resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$("#increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$("#decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
});
</script>
Сделаем это при помощи яваскриптового фреймворка JQuery и ихнего же UI, что бы было красивее:)
Итак, имеем три кнопки:
<div id="cahnge-font-size">
<input class="ui-state-default ui-corner-all" id="decreaseFont" type="button" name="#" value="Меньше">
<input class="ui-state-default ui-corner-all" id="resetFont" type="button" name="#" value="Нормально">
<input class="ui-state-default ui-corner-all" id="increaseFont" type="button" name="#" value="Больше">
</div>
Яваскрипт будет выглядеть так:
<script type="text/javascript">
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('html').css('font-size');
$("#resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$("#increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$("#decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
});
</script>
