Изменения цвета страницы

@LUC1U5 · Регистрация: 21.06.2015

Студворк — интернет-сервис помощи студентам

Не могу сделать задание нужно чтобы через prompt вводился цвет например red и страница становилась такого цвета. Такое же через textarea с нажатием на кнопку.

@aj17 · 03.05.2018, 18:43

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

Такое же через textarea с нажатием на кнопку.

Сделаете по аналогии...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>
 
<body>
 
  <script>
    $(document).ready(function() {
      var color = prompt('укажите цвет к примеру blue или #000');
      $("body").css('background', color);
    });
   
 
  </script>
  
</body>
 
</html>

Добавлено через 18 минут

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

через textarea

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
 
<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-6">
        <textarea placeholder="укажите цвет к примеру blue или #000" class="form-control my-3" id="area" name="" id="" cols="20" rows="10"></textarea>
        <input value="Присвоить цвет" class="btn btn-lg btn-secondary" id="btn" type="submit">
      </div>
    </div>
  </div>
 
 
  <script>
    $(document).ready(function() {
      $("#btn").click(function() {
        var color = $("#area").val();
        $("body").css('background', color);
      });
 
    });
 
  </script>
 
</body>
 
</html>

@LUC1U5 · 03.05.2018, 19:08 **[ТС]**

Спасибо большое!!! Я так понимаю эта строчка отвечает за выбор цвета. А что это такое ну в смысле почему для цвета используется она?

JavaScript
1
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384J3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

@aj17 · 03.05.2018, 19:50

Эта строчка подключает библиотеку jquery, прмеры которые я приложил они написаны не на чистом js

@msheal · 03.05.2018, 23:22

Не вижу смысла для такой простой задачи подключать jquery и плагин в довесок. Решение в пару строк кода:
https://codepen.io/msheal/pen/GdvRPK?editors=1010

HTML5
1
2
3
4
5
6
7
8
9
10
11
<textarea id="textarea" placeholder="укажите цвет к примеру blue или #000"></textarea><br>
<button id="textareaPicker">Apply</button>
<hr>
 
<button id="prompt">Prompt colorpicker</button>
 
<hr>
<label>
  Native html colorpicker
  <input type="color">
</label>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// textarea colorpicker
document.getElementById('textareaPicker').onclick = function(){
  document.body.style.backgroundColor = document.getElementById('textarea').value
}
 
// Prompt colorpicker
document.getElementById('prompt').onclick = function(){
  var color = prompt('укажите цвет к примеру blue или #000');
  document.body.style.backgroundColor = color
}
 
// Native html colorpicker
document.querySelector('[type="color"]').onchange = function(){
  document.body.style.backgroundColor = this.value
}

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@LUC1U5 -11 / 0 / 0 Регистрация: 21.06.2015 Сообщений: 82

	Изменения цвета страницы 03.05.2018, 18:01. Показов 2810. Ответов 4 Метки нет (Все метки) Не могу сделать задание нужно чтобы через prompt вводился цвет например red и страница становилась такого цвета. Такое же через textarea с нажатием на кнопку. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	03.05.2018, 19:50
	Эта строчка подключает библиотеку jquery, прмеры которые я приложил они написаны не на чистом js 1