Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки Java Script arrow WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение-3".
28.01.2022 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение-3". Печать E-mail
Автор megabax   
24.02.2021 г.
Урок 13. Управление шрифтами в CSS New Page 1

WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение-3".

Сегодня мы рассмотрим пример форматирования текста через стили CSS при помощи JS-скрипта. Собственно, вот пример:

<html>

    <head>

        <meta charset="UTF-8">

        <title>Урок 134. Java Script (JS): Изменение правил в таблице стилей</title>   

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function do_format()

            {  

                for(var i=0; i<s.length; i++)

                {

                    var item=document.getElementById('let'+i);

                    item.style.fontSize=(1+i/s.length*2)+'em';

                }

            }                      

        </SCRIPT>

    </head>

    <body OnLoad="do_format()">

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            var s=prompt('Введите строку','');

            for(var i=0; i<s.length; i++)

            {

                document.write('<SPAN ID="let'+i+'">'+s.charAt(i)+'</SPAN>');

            }

        </SCRIPT>

    </body>

</html>

 

Данный пример запросит текст, а потом выведет его с постоянно увеличивающимися буквами:

 

WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение-3".

 

Как это сделано? JS-скрипт, в котором идет запрос ввода текста, выводит каждую букву в теге <SPAN> и присваивает ей уникальный ID, состоящий из префикса "let" и номера буквы в строке. По этому ID Другой скрипт, который мы повесили на событие OnLoad находит элементы <SPAN> (в нем у нас, как вы поняли, буква) и устанавливает этому элементу стиль с соответствующим размером шрифта.

 

С уважением, Шуравин Александр, e-mail: Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script , автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 

Последнее обновление ( 24.02.2021 г. )
 
« След.   Пред. »
 
© 2022 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги