Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Увеличение шрифта статьи. (https://javascript.ru/forum/dom-window/2301-uvelichenie-shrifta-stati.html)

hello 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 04.12.2008 04:42

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

hello 04.12.2008 05:07

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

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


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

text1
text2
text3

<div class="text1>

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

Gvozd 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 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 04.12.2008 10:31

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

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

greatilya 04.12.2008 11:10

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

Kolyaj 04.12.2008 12:32

Цитата:

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

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

Цитата:

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

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

Gvozd 04.12.2008 13:08

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

greatilya 04.12.2008 13:15

Цитата:

Сообщение от Kolyaj
Где вы такую моду увидели?

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

greatilya 04.12.2008 13:22

Gvozd, я с Вами обсолютно согласен. Я также за способ изменения размера напрямую через скрипт, методом описаным вами, когда нет никаких ограничений по размеру шрифта. Хотя нет. Ограничение существует. Размер экрана))))
Кстати, если не ошибаюсь, в phpBB 3.х реализовали даный метод путём подгрузки CSS.

Kolyaj 04.12.2008 13:29

Я бы не стал считать профессионалами людей, которые используют id в стилях. Я, честно говоря, вообще не понимаю смысла в этом. Разницы от class нет никакой, а побочных эффектов куча.

Если уж хотите кого-то считать профессионалами, то тогда уж верстальщиков яндекса. Эти люди действительно знают свое дело.
В частности, техника "Верстка независимыми блоками" http://vitaly.harisov.name/article/i...nt-blocks.html
Цитата:

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

Поскольку id в валидном документе может быть только один, то при необходимости добавления точно такого же элемента на страницу надо переписывать код на классы. Хотя кажется, что это трёхминутное дело, на самом деле это относительно дорогая операция, поскольку изменение кода в уже работающем проекте требует участия нескольких человек (разработчики, тестировщики) и времени на кодировние, тестирование и выкладку. Это уже не говоря о том, времени этого просто нет.

Если id нужен для использования из скрипта, добавляем его отдельно, в стилях не используем.

Octane 04.12.2008 13:51

Не легче ли менять клас или идентификатор только для <body>, или идентификатор для <html>? И дополнительные стили можно вынести в отдельный файл и подключать динамически.

greatilya 04.12.2008 14:25

Kolyaj, спасибо, статейка занятная. И зачем же они добавляют прилагательное "профессиональные" к слову шаблоны. ))))

Kolyaj 04.12.2008 14:32

Цитата:

Сообщение от greatilya
И зачем же они добавляют прилагательное "профессиональные" к слову шаблоны.

Это уже философский вопрос :) Я верстки этих профессионалов не видел, покупать нет никакого желания.


Часовой пояс GMT +3, время: 18:59.