Question

我正在尝试创建一个网页，其中有一个包含颜色列表的下拉框。选择其中一种颜色会使句子（下拉列表代码下的p）变为该颜色。一切都很好，除了当我在下拉列表中选择颜色时，文本颜色不会改变。

HTML

<html>
    <head>
        <script type="text/javascript" src="colorchange.js"></script>
    </head>
    <body>
        <form>
            <select>
                <!--This is the drop-down list-->
                <option id="red" onclick="changeColor()">Red</option>
                <option id="orange" onclick="changeColor()">Orange</option>
                <option id="yellow" onclick="changeColor()">Yellow</option>
                <option id="green" onclick="changeColor()">Green</option>
                <option id="blue" onclick="changeColor()">Blue</option>
                <option id="purple" onclick="changeColor()">Purple</option>
            </select>
        </form>
        <!--These are the sentences that have to change text color-->
        <p>Sentence 1</p>
        <p>Sentence 2</p>
        <p>Sentence 3</p>
        <p>Sentence 4</p>
    </body>
</html>

JavaScript - colorchange.js

function changeColor() {
    document.getElementById("red")
    document.p.style.color = red;

    document.getElementById("orange")
    document.p.style.color = orange;

    document.getElementById("yellow")
    document.p.style.color = yellow;

    document.getElementById("green")
    document.p.style.color = green;

    document.getElementById("blue")
    document.p.style.color = blue;

    document.getElementById("purple")
    document.p.style.color = purple;
}

有人可以帮我处理代码吗？

Answer 1

您的代码存在一些问题。

如果您的选项调用changeColor()，则全部，这意味着点击任何选项将执行所有该代码。因此，您需要找到一些分离或指定所需颜色的方法。
document.getElementById('red')使用id red引用该元素。除了引用之外，这一行本身并不，所以你通常需要添加它来做任何事情。像document.getElementById('red').style.color = 'red'这样的东西。但由于id red <option>的元素在下拉菜单中是<p>，因此这不是您想要的。您想要引用document.p元素，并更改其颜色。
<p>未引用document.p元素。 p引用对象document的{{1}}属性。这个属性不存在。在JavaScript中，您通常希望使用其中之一：document.getElementById('id')，document.getElementsByTagName('tag')或document.getElementsByClassName('class')。请注意，对于标记名称和类名称，Elements是复数，因为您引用了所有列表中包含该标记或类的元素。因此，您通常需要缩小范围，或者使用循环为列表中的每个项目执行一些代码。
这不是一个问题，而是一个更好的方式来做你正在尝试做的事情。不要为id设置<option>，只需设置value s然后在JavaScript中，您只需引用value元素的<select>即可。下拉菜单的<select>元素的值将为用户选择的<option>。

说了这么多，这就是我如何编写代码来做你想做的事。

HTML：

<select id="colorChanger">
    <option>Choose a color</option>
    <option value="red">Red</option>
    <option value="orange">Orange</option>
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="purple">Purple</option>
</select>

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>

JS：

//add an event listener that calls changeColor() when the menu selection changes
//this is the same as adding onchange="changeColor()" in HTML
document.getElementById('colorChanger').addEventListener('change', changeColor);

function changeColor() {
    //store the menu's value (which is the value of the chosen option)
    var color = document.getElementById('colorChanger').value;

    //store the list of all <p> elements
    var list = document.getElementsByTagName('p');

    //loop through the list and apply the color to each <p> element        
    for (var i=0; i<list.length; i++) {
        list[i].style.color = color;
    }
}

或JS with jQuery：

//add an event listener that calls changeColor() when the menu selection changes
//this is the same as adding onchange="changeColor()" in HTML
$('#colorChanger').on('change', changeColor);

function changeColor() {
    //store the menu's value (which is the value of the chosen option)
    var color = $('#colorChanger').val();

    //apply the color to all <p> elements
    //(this is one of the benefits of using jQuery, it's much easier to apply certain changes)
    $('p').css('color', color);
}

这里有一个fiddle和JS。

这里是jQuery的fiddle。

Answer 2

这些方面应该做的事情 - 提供了jQuery和vanilla JS解决方案。同样值得注意的是，这会改变页面上每个 p标记的颜色。

<select id="change-color">
    <option value="red">Red</option>
    <option value="orange">Orange</option>
    <!-- more options as required -->
</select>

// jQuery
// whenever [id=change-color] changes its value
$('#change-color').on('change', function() {
    // set every <p> tag to be the colour of the selected options value attribute
    $('p').css('color', $select.val());
});

// JS
document.getElementById('change-color').onchange = function() {
    document.getElementsByTagName('p').style.color = this.options[ this.selectedIndex ].value;
}

如果您不想匹配每个p代码，只有部分内容匹配，则可以执行以下操作：

<p class="change-color">Something</p>
<p>Unchanged</p>

// jQuery
$('#change-color').on('change', function() {
    // Same as before, except only match <p> with 'change-color' class
    $('p.change-color').css('color', $select.val());
});

// JS
document.getElementById('change-color').onchange = function() {
    // Get every <p> tag in the document
    var ps = document.getElementsByTagName('p');
    // Iterate over them
    for (var i in ps) {
        // If their 'class' attribute contains the change-color class...
        if ( -1 !== (' '+ps[i].className+' ').indexOf(' change-color ') ) {
            // Change the colour of just this <p> tag and continue looping
            ps[i].style.color = this.options[ this.selectedIndex ].value;
        }
    }
}

最后，如果您使用最后的示例（vanilla JS，按类别匹配）并希望能够使用＆＃34;更改颜色＆＃34;类，您可以document.getElementsByTagName('*')来获取页面上的每个元素，而不仅仅是<p>标记。显然，如果页面中有大量元素，这将是相对资源密集型。

使用下拉框和JavaScript更改文本颜色

HTML

JavaScript - colorchange.js

2 个答案: