Форум

hello · #1 (**permalink**) 04.12.2008, 03:47

Срочно необходимо сделать увеличение шрифта статьи, точно такое же как на
http://www.bfm.ru/news/2008/12/04/am...oka-vverh.html

там есть размер шрифта А А А

надо сделать точно также, только без использования jQuery, а простым Яваскриптом.

<a href="???">Маленький</a> <a href="???">Средний</a> <a href="???">Большой</a>

Вот мой див, в котором надо увеличить текст, 
<div id="article">
      <div class="text">
            <p>текст истории</p>

Помогите примером! Я как понимаю, можно просто при клике на ссылку А менять class.ю например text1 text2 text3
И чтобы это моментально применялось.

<div onclick="document.getElementById('idblock').className = 'classOne';">Жми сюда и класс у idblock сменится!!!</div>
<div id="idblock" class="classZero">бла-бла-бла</div>

Как вам такое? Раставьте пожалуйста по полочкам, а то у меня мысли уже запутались.

Gvozd · #2 (**permalink**) 04.12.2008, 04:42

ну, собственно говоря а в чем проблема?
последнее решение имеет право на жизнь.
вы все правильно думаете и пишите.
есть конечно и другие варианты, но этот не хуже их, для ваших целей.
благославляю вас на написание кода.

hello · #3 (**permalink**) 04.12.2008, 05:07

Так если бы все Ок работало я бы написал.
Дело в том, что

<div onclick="document.getElementById('article').className = 'text2';">Жми сюда и класс у idblock сменится!!!</div>

текст не превращается в ссылку
Жми сюда и класс у idblock сменится!!!
так и стоит простым текстом. я уже прописал нужные классы

text1
text2
text3

<div class="text1>

Но все равно что то не работает. Может я забыл что то плдключить? У меня только этот Джаваскритп, никакой подгрузки скрипта из файла нет, ттолько эта маленькая строчка.

Gvozd · #4 (**permalink**) 04.12.2008, 09:12

<html>
<head>
<style>
.text1
{
font-size:16px;
}
.text2
{
font-size:64px;
}
</style>
</head>
<body>
<div onclick="document.getElementById('article').className = 'text2';">Жми сюда и класс у idblock сменится!!!</div>
<div id="article" class="text1">бла-бла-бла</div>
</body>
</html>

ну и где не раюотает?
если что и не работало у вас, то не от того что вы не знаете JS, а оттого что не знаете HTML,CSS или еще от чего.

greatilya · #5 (**permalink**) 04.12.2008, 09:21

Предлагаю так:

<style type="text/css">
#size1 { font-size:15px; }
#size2 { font-size:20px; }
#size3 { font-size:25px; }
</style>
<script>cur_style=1;</script>
<a href="#" name="re_size" onClick="document.getElementById('size'+cur_style).id='size1'; cur_style=1;" style="font-size:15px">A</a>
<a href="#" name="re_size" onClick="document.getElementById('size'+cur_style).id='size2'; cur_style=2;" style="font-size:20px">A</a>
<a href="#" name="re_size" onClick="document.getElementById('size'+cur_style).id='size3'; cur_style=3;" style="font-size:25px">A</a><br>
<div id="size1" name="sf"> Текст </div>

Kolyaj · #6 (**permalink**) 04.12.2008, 10:31

greatilya,
Зачем использовать ссылку, ведущую в никуда? Она еще и документ в данном примере в начало будет прокручивать.

Зачем менять у элемента id, если можно (и лучше) менять класс? Из-за этого пришлось хранить еще и cur_style.

greatilya · #7 (**permalink**) 04.12.2008, 11:10

1. ну по поводу ссылки конечно, поторопился. но суть вопроса была не в том. У ссылко можно прописать javascript:void(0). Да и лучше принимать ОнКлик не у "а" а к примеру, у "span" или других элементов.
2. Ну а то, что я написал через id так это только моё субьективное мнение, навязаное модой на использование в CSS "#id {...}". Да и данный пример, я думаю, поможет молодому человеку расширить кругозор по возможностям веба.

Kolyaj · #8 (**permalink**) 04.12.2008, 12:32

Сообщение от greatilya

У ссылко можно прописать javascript:void(0)

От этого она не станет вести куда-то.

Сообщение от greatilya

навязаное модой на использование в CSS "#id {...}"

Где вы такую моду увидели?

Gvozd · #9 (**permalink**) 04.12.2008, 13:08

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

greatilya · #10 (**permalink**) 04.12.2008, 13:15

Сообщение от Kolyaj

Где вы такую моду увидели?

Ну если за профессионалов считать верстальщиков с besttemplates.ru, то тогда, взяв в учет что данный способ задействован практически во всех шаблонах рубрики "Профессиональные шаблоны", можно судить о некой моде среди профессионалов.

Форум

Справочник

Discord чат

Курсы javascript