Question

我有一个div，在选中时会显示一个字体并点击“创建”按钮。我想这样做，当我从下拉列表中选择特定颜色时，字体以该颜色显示。这是html颜色表单：

<div class="formbox">
                <label for="colourSelect">Your Colour:</label>
                <select name="colourSelect" id="colourSelect">
                    <option value="X">Chooose a colour</option>
                    <option value="R">Red</option>
                    <option value="O">Orange</option>
                    <option value="Y">Yellow</option>
                    <option value="G">Green</option>
                    <option value="B">Blue</option>
                    <option value="P">Purple</option>
                </select>
            </div>

这是我用来显示字体的javascript。

function fonts(){

if(wholeForm.normal.checked == true){
document.querySelector("#display").style.fontFamily = 'AmbleRegular';

}

if(wholeForm.normal.checked == true){

    document.querySelector("#display").innerHTML = "Normal";

}
}

Answer 1

使用onchange作为下拉列表，并使用this.value

将参数传递给javascript

示例代码：onchange="fonts(this.value)"

在Javascript中，写下你的条件

var color;
if(value=="R"){
   color=Red
}
if(value=="Y"){
   color=Yellow
}

document.querySelector("#display").style.color=color; //assign the color here.

Answer 2

你需要一个听众：

如果我们的HTML是，请说：

<select id="colorSelect" onChange="update()">
    <option>red</option>
    <option>blue</option>
</select>

<div id="text">My text</div>

然后我们可以使用一个脚本，当select的值改变时，它将运行一个函数。

var select = document.getElementById("colorSelect");
var text = document.getElementById("text");

function update(){
    text.style.color = select[select.selectedIndex].value;
}

Answer 3

<script>
function kk(){

var aa = document.getElementById('colourSelect');
var gg = document.getElementById('txt')
var bb = aa.options[aa.selectedIndex].text

switch(bb){

case "Red" : aa.style.color = "red"; // this will change color of txt inside <option>
break;

case "Orange" : gg.style.color = "orange";//this will change color inside <p>
break;

case "Yellow" : aa.style.color = "yellow";
break;
}
}
</script>
<div class="formbox">
                <label for="colourSelect">Your Colour:</label>
                <select name="colourSelect" id="colourSelect" onchange="kk()">
                    <option value="X" >Chooose a colour</option>
                    <option value="R" >Red</option>
                    <option value="O">Orange</option>
                    <option value="Y">Yellow</option>
                    <option value="G">Green</option>
                    <option value="B">Blue</option>
                    <option value="P">Purple</option>
                </select>
            </div>

会改变颜色

如何使用javascript将字体显示为所选颜色？

3 个答案: