Спонсор поста: Большие ортопедические матрасы для кроватей.

Оригинал

Как я могу увеличить или уменьшить текст с jQuery?

Посмотрите пример.

Есть несколько путей, которыми вы можете достичь этой цели. Мы покажем только одну. Сначала давайте сделаем простую страничку.

<div>  
    <p id="text">  
     This is some text. This is some text. This is some text. This is some text. This  
     is some text. This is some text. This is some text. This is some text. This is some  
     text. This is some text. This is some text. This is some text. This is some text.  
     This is some text. This is some text. This is some text. This is some text. This  
     is some text. This is some text.  
    </p>  
    <a href="#" id="smallerTextLink">Smaller Text</a>  
    <a href="#" id="largerTextLink">Larger Text</a>  
  </div>

Здесь мы сделали некоторый текст и две ссылки. Когда кликаются ссылки, мы смотрим, что текст надо увеличить или уменьшить. Теперь давайте посмотрим на jQuery:

$(document).ready(function()
{
$('a').click(function()
{
    var theElement = $("#text").css("font-size");
    var textSize = parseFloat(theElement, 10);
    var unitOfMeasurement = theElement.slice(-2);

    if ( (this).id == "largerTextLink")
    {
	textSize += 2;
    }
    else
    {
	 textSize -= 2;
    };

    $('p').css("font-size",  textSize + unitOfMeasurement);

    return false;
    });
});

Как всегда рассмотрим код шаг за шагом.

$(document).ready(function()
        {
            $('a').click(function()

Когда документ готов, мы смотрим на все теги “а” и запускаем функцию.

var theElement = $("#text").css("font-size");
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);

Здесь мы сделали несколько вариантов. “theElement” найдет параграф с id=”text” и возьмет его размер шрифта из CSS. Когда мы добавляем свойство в круглых скобках, мы говорим jQuery получить размер шрифта параграфа. Этот параметр может быть возвращен как номером, так и параметром (то есть 20px). Нам необходимо их разделить.

Переменная “textSize” использует метод “parseFloat”. Этот метод просмотрит все значения и уберет нецифровые символы. В этом случае мы разбираем свойство font-size, чтобы избавиться от “px”. “10” обозначает, что мы работаем с базовым шрифтом десятого размера.

“unitOfMeasurement” берет едеиницу измерения шрифта путем получения последних двух символов (px). Нам это необходимо, чтобы добавить новое значение.

if ( (this).id == "largerTextLink")
{
	textSize += 2;
}
else
{
	textSize -= 2;
};

This if statement is checking to whether the anchor tag that was clicked has an id of “largerTextLink”. If it does, then we’re going to add 2px to the textSize. This is the same as writing - textSize = textSize + 2 -. If it is not, the user must have clicked the “smallerTextLink” anchor tag. In that case, we’ll decrease the textSize by 2px.

Это выражение проверяет, был ли кликнут тэг с id=”largerTextLink”. Если был, тогда мы собираемся добавить 2px к textSize. Если нет, значит пользователь кликнул “smallerTextLink”. В этом случае мы уменьшаем textSize на 2px.

$('p').css("font-size",  textSize + unitOfMeasurement);
return false;

Наконец мы собираемся задать параграфу новое значение. Font-size будет задано новое значение textSize плюс unitOfMeasurement. Очень просто, правда?

Популярность: 28%