JavaScript-更改文字颜色
[英]JavaScript - Change text color
问题描述
I tried to change text color via html select option. 
我试图通过html select选项更改文本颜色。 I suppose it doesn't go this way I did it. 我想这不是我做的那样。 I'm new to this, so sorry in advance for some rookie mistakes. 我对此并不陌生，所以请您为一些菜鸟的错误提前感到抱歉。 Here's the code. 这是代码。
<!DOCTYPE html>
<html>
<body>
Select color:
<select id="mySelect">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
</select>
<p>Click the button to change color of the text.</p>
<p id="par">Text color</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("mySelect").selectedIndex;
document.getElementById("par").style.color = x;
}
</script>
</body>
</html>
4 个解决方案
解决方案1
2 已采纳 2018-04-15 16:14:39
You need to get value from select: 您需要从select中获取价值：
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("par").style.color = x;
}
</script>
解决方案2
2 2018-04-15 16:16:37
Try the below 试试下面
<!DOCTYPE html>
<html>
<body>
Select color:
<select id="mySelect">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
</select>
<p>Click the button to change color of the text.</p>
<p id="par">Text color</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value
console.log(x)
document.getElementById("par").style.color = x;
}
</script>
</body>
</html>
解决方案3
1 2018-04-15 16:16:10
Use x.options[x.selectedIndex].value 使用x.options[x.selectedIndex].value
function myFunction() { var x = document.getElementById("mySelect") var color = x.options[x.selectedIndex].value document.getElementById("par").style.color = color; }
<!DOCTYPE html> <html> <body> Select color: <select id="mySelect"> <option value="black">Black</option> <option value="blue">Blue</option> <option value="red">Red</option> <option value="orange">Orange</option> </select> <p>Click the button to change color of the text.</p> <p id="par">Text color</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html>
解决方案4
1 2018-04-15 16:22:06
dynamic changing 动态变化
<!DOCTYPE html>
<html>
<body>
Select color:
<select id="mySelect" onChange="changeColor(value);">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
</select>
<p>Click the button to change color of the text.</p>
<p id="par">Text color</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function changeColor(color) {
var x = document.getElementById("mySelect").selectedIndex;
document.getElementById("par").style.color = color;
}
</script>
</body>
</html>
On submit 提交时
<!DOCTYPE html>
<html>
<body>
Select color:
<select id="mySelect">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
</select>
<p>Click the button to change color of the text.</p>
<p id="par">Text color</p>
<button type="button" onclick="changeColor()">Try it</button>
<script>
function changeColor() {
var x = document.getElementById("mySelect").value
document.getElementById("par").style.color = x;
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript更改文本颜色 - Javascript to change the text color
JavaScript更改文字颜色 - JavaScript change the text color
更改JavaScript中的颜色文本 - Change color text in javascript
使用 Javascript 更改文本颜色？ - Change text color with Javascript?
使用JavaScript更改文本框文本颜色 - Change textbox text color with javascript
JavaScript函数-更改文本的颜色 - JavaScript Function - Change the color of text
更改所选文本Javascript的颜色 - Change color of a selected Text Javascript
使用javascript更改文本颜色 - Change color of text using javascript
使用Java计时器更改背景颜色和文本颜色 - Change the background color and text color with a timer with Javascript
使用javascript更改文本颜色和背景颜色 - Change text color and background color using javascript
相关标签