根据选定的颜色更改颜色

Question

如果我想进行一个有点陈列橱窗设计演示，其中用户会看到3个下拉框。我希望网站能够响应用户的选择。

因此，在第一个下拉菜单中，您被要求选择文本的颜色（包括所有h1-> h6，p元素，一个元素）。

第二个下拉列表是文字阴影（应用于h1-> h6，p和a）。

第三个下拉列表是字体。我正在加载字体，虽然fonts.google.com

当用户更改其中任何样式应立即更改。

我有一个jsfiddle我当前的代码。该代码sorta的作品，它改变颜色，笔画和字体，但只在它自己的下拉菜单。

我怎样才能让它适用于整个页面？

https://jsfiddle.net/cajsw1eq/3/

<script> 
function colorFunction(pos) { 
    pos.className = pos[pos.selectedIndex].className; 
    pos.blur(); 
} 
</script> 

Answer 1

我会在设置选项的ID标签的颜色代码，这样，这样你就不会通过在改变功能选项所有不同的值必须循环。

<option id="#FC6B0A" class="orange" value="1">Orange</option> 

然后，您在选择选项时调用该函数。我建议将字体，颜色和阴影放在一个函数中。

现在你有两个选择：

使用此功能，有三个参数。

function change(colorId, shadow, font) { 
    if (colorId != null) { 
     //example of working code: 
     document.getElementsByTagName("BODY")[0].style.color = colorId; 
    } 
    if (shadow != null { 
     //code... 
    } 
    if (font != null) { 
     //more code.. 
    } 
} 

，并调用这样的功能：

onchange="change(this.options[this.selectedIndex].id, null, null);" 

，或者，你可以调用函数不使用参数，以及从函数中获取值。