如何使用JS函數更改頁面中的元素樣式

我需要2個簡單的JavaScript函數來讀取和更改點擊div上的顏色。我不想使用框架，jQuery的任何其他手段，但簡單的HTML，CSS，JS。，我已經寫了和亙古不工作的代碼如下：如何使用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>

來源

2012-03-27 viktor

你能做的最好的事情是使用Firebug的或鍍鉻的開發工具來實際看看報道的JavaScript控制檯上。你會立即發現這個問題。 – wds 2012-03-27 12:03:07

你是可靠的，但我已經嘗試與鉻，並沒有發現錯誤。 – viktor 2012-03-27 12:21:41

在鉻：工具 - >開發人員工具。按原樣運行代碼，並在數組行上引發'ReferenceError'。你可以用這個信息問一個更具體的問題。只是評論一下，因爲一個好的調試器會爲你節省時間。 – wds 2012-03-27 12:24:54

我相信只是改變

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

到

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

應該這樣做..

演示在http://jsfiddle.net/pYc4P/

來源

2012-03-27 12:00:41

哇，一羣。這實際上令人尷尬。我已檢查並重新檢查了readColor和changeColor函數，並在6種不同的模式下重寫了它們，但無濟於事。而這一次錯誤在變量聲明中。它現在完美，thx – viktor 2012-03-27 12:20:49

我認爲這個問題是你是不是在色彩傳遞的onclick

如果它不閱讀：

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

來源

2012-03-27 11:59:26

創建colorArray爲對象，但你正在使用它作爲一個數組。

嘗試宣告它作爲一個數組來代替：

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

或者：

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

來源

2012-03-27 11:59:38

如何使用JS函數更改頁面中的元素樣式

回答

相關問題