using javascript with css?

Question

when i did click text input, i want to change input background color but with javascript.

I know with css.

I want for example.

<form action="" name="abc" method="post">
<input name="abc" id="name" type="text"/>
<input name="yusuf" type="text"/>
<input type="submit"/>
</form>

How can i select element name as name with javascript?

I want similar:

 <script>
document.getElementById("name").style = "background-color:red";
</script>

I want to write css code but direct. Shortly how can i reach style="" parameters?

Answer 1

You're looking for the style object:

document.getElementById("name").style.backgroundColor = "red";

You can also set the className property to apply an existing CSS class to the element.

Answer 2

Is jQuery an option? You can try something like this:

$(document).ready(function(){
    var toggleRed = function(){
        $(this).toggleClass('red');
    };
    $('input[type=text]').focus(toggleRed);
    $('input[type=text]').blur(toggleRed);
});

And then define this in your CSS:

input.red { background-color: Red; color: White; }

Check out the working example: http://jsfiddle.net/V5qJp/