1 Тема від bart

  • bart
  • Користувач
  • Поза форумом
  • Дата реєстрації: 29.05.2012
  • Повідомлень: 1
    • Репутація: 0

Тема: Зміна стилів JavaScript

Допоможіть з завданням. Створити HTML файл, який містить п’ять стилів документу, текстовий блок з першим стилем та об’єкт виклику функції з циклічною зміною стилів даного блоку (використати масив імен стилів та властивість об’єкту className).

2 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2105

Re: Зміна стилів JavaScript

demo: http://replace.org.ua/files/tasks/js-task.html

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Task</title>
        <meta charset="UTF-8">
        <style type="text/css">
        
            form {
                padding: 100px;
            }
            
            input[type=text] {
                border: 1px solid #ccc;
                padding: 4px;
                font-size: 12px;
            }
            
            input[type=button] {
                font-size: 12px;
                padding: 4px;
            }
            
            .input1 {
                color: #000;
            }
            
            .input2 {
                color: #00f;
            }
            
            .input3 {
                color: #0f0;
            }
            
            .input4 {
                color: #f00;
            }
            
            .input5 {
                color: #999;
            }
        </style>
        <script type="text/javascript">
            
            var counter = 1;
            var max_counter = 5;
            
            function changeStyle() {
                counter++;
                if (counter > max_counter) counter = 1;
                var input = document.getElementById('input');
                input.className = 'input' + counter;
            }
        </script>
    </head>
    <body>
        <form>
            <h2>Стиль текстового блоку</h2>
            <p>Створити HTML файл, який містить п’ять стилів документу, текстовий блок з першим стилем та об’єкт виклику функції з циклічною зміною стилів даного блоку (використати масив імен стилів та властивість об’єкту className).</p>
            <input type="text" id="input" class="input1" value="Text">
            <input type="button" onclick="changeStyle();" value="Змінити стиль">
        </form>
    </body>
</html>

Replace вебсайт