javascript - 根据选择更改颜色

Question

如果我想制作一个展示设计演示，向用户展示 3 个下拉菜单。我希望网站响应用户的选择。

因此，在第一个下拉列表中，您需要选择文本的颜色(包括所有 h1->h6、p 元素、a 元素)。

第二个下拉框是文本阴影(适用于 h1->h6、p 和 a)。

第三个下拉菜单用于字体。我正在通过 fonts.google.com 加载字体

当用户更改其中任何一个时，样式应立即更改。

我有一个 jsfiddle 我当前的代码。该代码可以正常工作，它可以更改颜色、笔划和字体，但只能在它自己的下拉菜单中使用。

如何让它应用到整个页面？

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);"

或者，您可以在不使用参数的情况下调用函数，并从函数内部获取值。