I have this html code

<div id = 'status'>
<span class="formw" style="background-color:#FBD9E5;">
some text
</span>
</div>

When the following javascript gets executed

$('status').style.backgroundColor = '#99e83f'; 

chrome throws the following error:

Uncaught TypeError: Cannot read property 'style' of null

Anybody knows the reason?

Update: I am using Prototype.

I have this html code

<div id = 'status'>
<span class="formw" style="background-color:#FBD9E5;">
some text
</span>
</div>

When the following javascript gets executed

$('status').style.backgroundColor = '#99e83f'; 

chrome throws the following error:

Uncaught TypeError: Cannot read property 'style' of null

Anybody knows the reason?

Update: I am using Prototype.

• javascript
• css
• google-chrome
• prototypejs

• @user ,do we have property called backgroundcolor fordiv, it should be color right or background image url – kobe Commented Nov 12, 2010 at 5:36
• I believe you are missing a # for the ID, do: $('#status'), I am assuming you are using jQuery here tho. – Jakub Commented Nov 12, 2010 at 5:42
• @gov - yes, that property is valid. @user - does this work with document.getElementById()? – Ben Commented Nov 12, 2010 at 5:43
• @steve , you are right , i forgot. – kobe Commented Nov 12, 2010 at 5:45
• If it is jQuery, then .style.foo is wrong too (and it would be plaining that style was null, not that the return value of $ was. (mutter, mutter, $ is a hateful variable name: blog.dorward.me.uk/2009/02/19/the-dollar-function-must-die.html ). I'd guess that $ was mapped directly on to document.getElementById and that the JS was being run before the div appeared in the source code, but the question is missing so much information that that is just poking around blindly. – Quentin Commented Nov 12, 2010 at 5:56

5 Answers 5

There are two errors in:

$('status').style.backgroundColor = '#99e83f'; 

First:

• You are missing the # to specify the id in your selector for status div.

Second:

• The style property won't work on jQuery object that is $('#status').

Solution:

Method One:

$('#status')[0].style.backgroundColor = '#99e83f'; 

The [0] added above converts jQuery object into normal DOM element so that style property is applied successfully.

Method Two:

('#status').css('background-color','#99e83f');

You specifically mention Google Chrome. Chrome is stricter about standards than most, especially if your document has a DOCTYPE.

The markup <div id = 'status'> makes me suspicious. Although most browsers are forgiving about mon syntax errors it is possible that by having id space separated from equals causes it to be treated as a boolean attribute, which is equivalent to <div id="id">.

You can test this opening the javascript console (Shift+Ctrl+J) and see what results from typing:

$('status')
$('id')

For a solution try it like this:

<div id="status">

PS. I would guess you don't actually want to alter the DIV's style but the span's, for which any of the following is correct.

$$('#status .formw').style.backgroundColor = '#99e83f';

$$('#status span').style.backgroundColor = '#99e83f';

$('status').down('.formw').style.backgroundColor = '#99e83f';

$('status').select('span').style.backgroundColor = '#99e83f';

Try

$('#status').style.backgroundColor = '#99e83f';

if you are using jquery try this

$('#status').css('background-color','green');

this should work

Sometimes there are some DOM hiccups when it es to elements in prototype when you are using the classic DOM methods.

Instead use the defined methods in prototype to read and set styles for an element.

The two methods you are interested in are:

• .setStyle, documentation( http://www.prototypejs/api/element/setStyle )
• .getStyle, documentation( http://www.prototypejs/api/element/getStyle )

So, in example, if you want to set the background of your element, you would use:

$('status').setStyle( { 'background-color' : '#99e83f' } );

If you wanted to read the attribute, you would use:

$('status').getStyle( 'background-color' )

For the jquery crowd, the $( 'element_id' ) is the equivalent shorthand for document.getElementById( 'element_id' ). If you wanted to get the element by selector, it would be $$( '#element_id' ).first().