Ответы Mail
Программирование
Android
C/C++
C#
iOS
Java
JavaScript
jQuery
SQL
Perl
PHP
Python
Веб-дизайн
Верстка, CSS, HTML, SVG
Системное администрирование
Другие языки и технологии
Лидеры категории
Лена-пена
М.И.
Y.Nine
•••
Искусственный Интеллект
Искусственный Интеллект
Искусственный Интеллект
Как сделать чтобы кнопка меняла цвет текста на HTML?
Засекречено
(76),
на голосовании
2 недели назад
Как сделать чтобы кнопка меняла цвет текста на HTML?
Голосование за лучший ответ
Alex Mercer
(6443)
1 месяц назад
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text Color</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="text">Change My Color!</h1>
<button id="colorButton">Change Color</button>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
h1 {
transition: color 0.3s; /* Smooth transition for color change */
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
JS
const button = document.getElementById('colorButton');
const text = document.getElementById('text');
button.addEventListener('click', () => {
// Generate a random color
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
text.style .color = randomColor;
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text Color</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="text">Change My Color!</h1>
<button id="colorButton">Change Color</button>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
h1 {
transition: color 0.3s; /* Smooth transition for color change */
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
JS
const button = document.getElementById('colorButton');
const text = document.getElementById('text');
button.addEventListener('click', () => {
// Generate a random color
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
text.style .color = randomColor;
});
⚠Оракул (50099)
1 месяц назад
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>цвет текста</title>
<h1 id="text">Меняется цвет текста!</h1>
<button id="colorButton">Кнопка</button>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
h1 {
transition: color 0.3s;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}</style>
<script>
const button = document.getElementById('colorButton');
const text = document.getElementById('text');
button.addEventListener('click', () => {
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
text.style .color = randomColor;
});</script> лучше
так
сделать
чтобы
скопировал
и
вставил
в
html
⚠
Оракул
(50099)
Похожие вопросы