У меня есть быстрый вопрос относительно 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 +"'; ")
Заранее спасибо.
2 ответа
Вот как бы я это сделал.
Изменить цвет при вводе пользователем
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
, как я это делал в приведенном выше примере.
Сначала создайте свою функцию, которая будет возвращать отображаемое значение после события щелчка.
function changeDisplay{
var value="block";
return value;
}
Затем вызовите его в функции щелчка onclick = "this.parentElement.style.display = changeDisplay ()";
Примечание: - способ изменить цвет фона у концепции тот же, но вам нужно добавить эту функцию к другому событию, такому как изменение текста во вводимом тексте или выбрать опцию из поля выбора или так, как вы хотите в своем скрипте или веб-странице.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.