如何使用JS函数更改页面中的元素样式

how can I use a JS function to change an element style in the page

本文关键字：元素 样式 何使用 JS 函数      更新时间：2023-09-26

我需要两个简单的JavaScript函数，它们可以在单击时读取并更改div的颜色。我不想使用框架，jQuery任何其他方式，只是简单的html，css，JS。我写的代码不起作用如下：

随机颜色

<script>
    var colorArray = {yellow, red, blue, purple};
    function readColor () {
        color = document.getElementById("color");
            }
    function changeColor (color) {
            var randomColor = colorArray[Math.floor(Math.random() * colorArray.length)];    
        document.getElementById('color').style.backgroundColor = randomColor;
        var colors = document.getElementById('color');              
            colors.style.backgroundColor = color;
    }       
</script>
<style type = "text/CSS">
    <!--
    #color {
        background-color: yellow;
    }
    -->
</style>


<div id="color" style="border-color: #eee; border-style: solid; width: 300px; height: 300px; margin-right: auto; margin-left: auto; margin-top: 200px; padding: 50px; background-color: yellow;" onChange = "readColor ();">
    Aici are loc lupta
</div>  
<div style="text-align: center; margin-top: 20px;"> 
    <input type="button" name="Change color" value="Change Color" onClick = "changeColor ()">
</div>

我相信只是更改

var colorArray = {yellow, red, blue, purple};

至

var colorArray = ['yellow', 'red', 'blue', 'purple'];

应该这样做。

演示位置http://jsfiddle.net/pYc4P/

我认为问题是你没有在onclick 上传递颜色

不应该读：

<input type="button" 
       name="Change color" 
       value="Change Color" 
       onClick = "changeColor (color)">

您将colorArray创建为对象，但将其用作数组。

尝试将其声明为数组：

var colorArray = new Array("yellow", "red", "blue", "purple");

或者：

var colorArray = ["yellow", "red", "blue", "purple"];
相关文章：