Как использовать всплывающее окно для изменения CSS (цвет фона)

Question

У меня есть быстрый вопрос относительно JavaScript и CSS.

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

Из W3Schools:

function myFunction() {
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
    document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";
}
}

Также из W3Schools:

onclick="this.parentElement.style.display='none';"

Теперь мой главный вопрос, который я полагаю, состоит в том, как принять участие, где говорится "display = 'none';" на самом деле взять ввод всплывающего окна и вставить его в onclick для достижения моей цели (это будет что-то вроде этого.parentElement.style.backgroundcolor = '"+ usercolorinput +"'; ")

Заранее спасибо.

javascript css

0

BakeMeMuffins92 25 Апр 2017 в 04:18

Answer 1

Вот как бы я это сделал.

Изменить цвет при вводе пользователем

function changeColor(element) {
  document.body.style.backgroundColor = element.value;
}

<h4> Type #333, or pink below </h4>
<input oninput="changeColor(this)"/>

Как это работает:

<input-element> может инициировать несколько событий на основе вашего ввода. В этом случае я использовал событие oninput, которое срабатывает каждый раз, когда вы что-то вводите в <input>, для вызова функции с именем changeColor.

Вход также отправляет сам элемент при вызове функции в качестве аргумента. Поэтому в моей функции changeColor у меня есть доступ к элементу, который ее вызвал.

Внутри функции я читаю value ввода, а затем выбираю body страницы и устанавливаю его backgroundColor в качестве значения ввода.

Или с помощью кнопки

Или вы можете использовать кнопку, как вы просили.

function changeColor() {
  // get the input element value
  var inputValue = document.getElementById("colorInput").value;
  
  // apply the value as a backgroundColor on body
  document.body.style.backgroundColor = inputValue;
}

<h4> Type #333, or pink below and press "Change color" </h4>
<input id="colorInput"/>
<button onclick="changeColor()"> Change color </button>

Как это работает:

В этом случае функция changeColor вызывается нажатием кнопки.

Внутри этой функции мы получаем значение ввода, получая input через его атрибут id и считывая его значение.

Затем я использую это значение, чтобы применить backgroundColor к body, как я это делал в приведенном выше примере.

2

Nik Kyriakides 25 Апр 2017 в 01:37

Answer 2

Сначала создайте свою функцию, которая будет возвращать отображаемое значение после события щелчка.

function changeDisplay{
var value="block";
return value;
 }

Затем вызовите его в функции щелчка onclick = "this.parentElement.style.display = changeDisplay ()";

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

-1

Osama 25 Апр 2017 в 01:31

Как использовать всплывающее окно для изменения CSS (цвет фона)

2 ответа

Изменить цвет при вводе пользователем

Как это работает:

Или с помощью кнопки

Как это работает:

Похожие вопросы

Новые вопросы

javascript