示例： 此示例通过使用Javascript从下拉菜单中选择颜色来说明HTML元素的颜色变化。
极客教程<!DOCTYPE html>
<html>
<head>
<title>
Change Font Color - Method 2
</title>
<style>
body {
margin: 10rem;
}
</style>
</head>
<body>
<div id="gfg">
<h1>
Welcome To GeeksForGeeks!!
</h1>
</div>
<label for="selectColor">
Select a color:
</label>
<select id="selectColor"
onchange="changeColor()">
<option value="black">Black</option>
<option value="crimson">Red</option>
<option value="green">Green</option>
<option value="#0984e3">Blue</option>
<option value="cyan">Cyan</option>
<option value="#00b894">Mint Leaf</option>
<option value="#e84393">Pink</option>
</select>
<script>
// Provide a function to modify the
// "gfg" element's font color.
function changeColor() {
var gfg = document.getElementById("gfg");
var selectColor =
document.getElementById("selectColor");
// From the drop-down menu, obtain
// the value of the chosen color.
var selectedColor =
selectColor.options[selectColor.selectedIndex].value;
// Set the font color of the "gfg"
// element to the selected color
gfg.style.color = selectedColor;
}
</script>
</body>
</html>
输出：
