Используя jQuery, вы можете сделать что-то вроде этого:
$(function(){
$('#smallT').click(setTextToSmall);
$('#mediumT').click(setTextToMedium);
$('#largeT').click(setTextToLarge);
});
function setTextToSmall(evt)
{
$('.text-to-resize').addClass('small').removeClass('medium').removeClass('large');
}
// Have similar setTextTo.. functions for Medium and Large here
Чтобы уточнить, это на самом деле использует CSS для изменения размеров. У вас будет три CSS-класса с именами: «маленький», «средний» и «большой»:
.small { font-size: 0.5em; }
.medium { font-size: 1em; }
.large { font-size: 1.5em; }
Функция setTextToSmall() вызывается, когда пользователь нажимает маленькую букву «Т». Он добавляет класс small для всех элементов, которые уже имеют класс text-to-resize, и удаляет средние и большие классы. Итак, где вы могли бы иметь это до щелчка:
<div class="text-to-resize">Some sample text</div>
После клика вы бы это получили:
<div class="text-to-resize small">Some sample text</div>
Если вы хотите применить это к каждому элементу на странице, вы просто измените setTextToSmall() на следующее:
function setTextToSmall(evt)
{
$().addClass('small').removeClass('medium').removeClass('large');
}
Преимущество jQuery (или других фреймворков в этом отношении) состоит в том, что он абстрагирует DOM, что очень сложно для разных браузеров. Например, чтобы сделать это в простом Javascript, вы можете инстинктивно захотеть использовать document.getElementsByClassName(). Однако этот метод не существует ни в одной версии IE .