Функция изменения размера

Мне нужно сделать элемент управления, который имеет три разных типа T, которые связаны. Нажав на каждый T, текст статьи изменит размер на малый, средний или большой шрифт соответствующим образом.Функция изменения размера

Кто-нибудь знает, как я могу это сделать? Кроме того, знаете ли вы о сайте, который использует эту функцию изменения размера текста?

Заранее спасибо.

ОБНОВЛЕНИЕ: Спасибо за все ваши ответы. Я немного углубился в Google и обнаружил, что у этого есть потенциал: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript Он использует JS для динамического изменения размера шрифта, и это именно то, что я хочу сделать. Я бы предпочел сделать это в CSS, если это возможно, хотя - кто-нибудь?

источник

2009-12-22 Cindy

Добро пожаловать в StackOverflow! Большой первый вопрос. – Sampson

Вы можете прикрепить различные файлы CSS, в зависимости от того, какой «t» человек нажал (изменив размер текста абзаца). Я уверен, что есть лучший способ, но это выполнит работу!

источник

2009-12-22 19:01:55 silentcontributor

Thanks mr1989. Я не думаю, что хочу прикреплять разные файлы, хотя :) – Cindy

Использование 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() функция вызывается, когда пользователь нажимает на небольшой «Т». Он добавляет класс «маленький» ко всем элементам, которые уже имеют класс «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, который очень сложно через другой браузер s. Например, для этого в прямом Javascript вы можете инстинктивно использовать document.getElementsByClassName(). Однако этот метод doesn't exist in any version of IE.

источник

2009-12-22 19:02:29

OP никогда не говорил или не отмечал JQuery, он распространен, не означает, что там нет улучшенных фреймворков. Как насчет простого Javascript? –

Я вообще не знаю JQuery. Если это не код типа копирования/вставки, это не поможет мне. Спасибо за ответ. – Cindy

Да, я не использую jQuery, его отклонение от кода JavaScript, я очень советую никому не использовать что-то вроде jQuery, если вы действительно не можете найти свой путь вокруг ошибок Javascript, DOM и кросс-браузера. – DoctorLouie

Вы можете сделать это с помощью CSS - если все ваши шрифты являются процентами, вы можете установить один размер шрифта для документа, и все дети будут в процентах от этого.

источник

2009-12-22 19:03:32

Я бы хотел сделать это в CSS. Можете ли вы объяснить это дальше? Мои шрифты в .em, к чему я привязываю T? – Cindy

Прежде всего, вам нужно понять, что фактический размер шрифта на основе процента (1.5em в 1,5 раза превышает размер шрифта, установленного в родительском элементе). Теперь, позвольте мне объяснить далее: для текста, который вы хотите изменить с помощью изменения размера T, установите их размер шрифта в процентах (или используйте em). все они должны иметь одного и того же родителя, поэтому это должно быть легко. Когда пользователь нажимает кнопку T заданного размера, измените размер шрифта родителя, и все будет готово. –

-1

Вы можете использовать

("fontSize",+=3px)

Если вы не хотите иметь предел.

источник

2009-12-22 19:07:54 Axiol

Этот подход не будет реализован с использованием только CSS. Вам нужно будет использовать CSS в сочетании с JavaScript.

Лучшим подходом было бы установить размер тела по умолчанию, используя либо проценты, либо ems. Вы создали бы два дополнительных класса для большего и меньшего размера шрифта для контейнера страницы или тега <body>. Эти классы могли использовать более крупные и меньшие проценты/ems, или вы могли бы использовать ключевые слова: xx-small, x-small, small, large, x-large, xx-large.(ПРИМЕЧАНИЕ: я оставил все меньше и больше, поскольку они, похоже, не работают иногда).

Затем, используя JavaScript, вы можете прикрепить событие onclick к вашим трем T, которые динамически добавили бы желаемый класс в контейнер страницы (или <body>). Если бы они нажали на средний T, тогда примененный большой/маленький класс был бы удален, возвращая страницу к размеру шрифта по умолчанию.

Несколько вещей, которые нужно иметь в виду:

Пользователь может установить минимальный размер шрифта для браузера, так что если вы установите «малый» размер ниже этой настройки, пользователь никогда не увидит ваш маленький настройки шрифта.
Вам нужно будет поэкспериментировать с тем, как работает ваш макет, если пользователь имеет более крупный размер шрифта по умолчанию.

Надеюсь, это поможет и удачи!

источник

2009-12-22 20:03:23 Lark

Спасибо, Ларк! – Cindy

Функция изменения размера

ответ

Смежные вопросы