Question

如果我想制作一个有点展示设计演示，那么用户将获得3个下拉菜单。我希望网站能够回应用户选择的内容。

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

第二个下拉列表是文本阴影（应用于h1-＆gt; 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);"

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

根据选择更改颜色

1 个答案: