Question

我正试图弄清楚如何使用下拉菜单更改网页的文字颜色，我已经设法使用下拉菜单成功更改背景颜色以下代码：

有人可以告诉我如何实现这个目标吗？

Answer 1

更改<body>元素的文字颜色：

document.body.style.color="#"+backGround.options[backGround.selectedIndex].value

请参阅DEMO。

Answer 2

首先，将你的javascript移到一个单独的函数中（这只是一个很好的练习，并且更容易阅读/更新）并设置你的onChange（）;调用该函数，并将select值传递给它。

然后将你的函数写成这样的东西：

<html>
    <head>
        <script type="text/javascript">
            function updateTextColour(value) {
                document.body.style.color = '#' + value;
            }
        </script>
    </head>
    <body>
        <form>Change the background color:
            <select name="backGround" size="1" onChange="updateTextColour(this.value)">
                <option value="000000">[Black]</option>
                <option value="FF0400">[Red]</option>
                <option value="EFE800">[Yellow]</option>
                <option value="05EF00">[Green]</option>
                <option value="0206FF">[Blue]</option>
                <option value="FFFFFF" selected>[White]</option>
            </select>
        </form>
    </body>
</html>

此外，您实际上可以使用以下JS的words for these colours ...实验：

document.body.style.color = "red";
document.body.style.color = "blue";
document.body.style.color = "grey";

使用下拉列表更改网页的文本颜色

2 个答案: