如何使用JavaScript設置CSS值？

我想更改ID爲foo的HTML元素的背景顏色。我有這樣的代碼目前：如何使用JavaScript設置CSS值？

var hexcode = new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'); 

// this chooses a random value from the array hexcode 
var ranval = function() { 
    return hexcode[Math.floor(Math.random()*hexcode.length)]; 
} 

// six ranval() are put together to get color 
var colorname = "#" + ranval() + ranval() + ranval() + ranval() + ranval() + ranval(); 

// trying to put the value on the background of element with "foo" ID. 
document.getElementById("foo").style.color = colorname;

此代碼是引發此錯誤：

Uncaught TypeError: Cannot read property 'style' of null

我敢肯定，ID foo存在。

來源

2013-01-07 Santosh Kumar

你肯定？您的'

發生錯誤是因爲您在DOM準備好之前嘗試訪問您的元素。等待窗口在訪問之前加載：

// Credit: http://paulirish.com/2009/random-hex-color-code-snippets/ 

function random_color() { 
    return '#' + ('00000' + (Math.random() * 16777216 << 0).toString(16)).substr(-6); 
} 

window.onload = function() { 
    document.getElementById("foo").style.backgroundColor = random_color(); 
};

演示：http://jsfiddle.net/Blender/xQure/1/

來源

2013-01-07 02:26:24 Blender

我得到了沒有錯誤，但顏色沒有改變..：/ –

你的腳本將有@Blender錯誤，因爲如果你得到的數字少於6個字符，顏色不會改變或改變錯誤。 –

@GabrielGartz：謝謝，現在應該會很好。 – Blender

相關問題